html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- Created by Anise FH-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<table>
<tr>
<td>topic1</td>
<td>
<div id="outer">
<div id="inner"></div>
</div>
</td>
</tr>
</table>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* Created by Anise FH */
#outer {
display:inline-block;
position:relative;
font-family:FontAwesome;
}
#outer::before {
content:"\f006 \f006 \f006 \f006 \f006";
}
#inner {
position:absolute;
white-space:nowrap;
top:0;
left:0;
overflow:hidden;
width:0%;
}
#inner::before {
content:"\f005 \f005 \f005 \f005 \f005";
color: orange;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
// Created by Anise FH
<!-- the counter is defined to hold the number of correct answers. assuming the counter is 3 -->
onload = init;
function init() {
var counter = 3;
var star = document.getElementById("inner");
star.style.width = "60%";
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run