Skip to content

Instantly share code, notes, and snippets.

@X39

X39/quiz.html

Created August 16, 2017 13:15
Show Gist options
  • Save X39/29a15d167c157e22a6f01221f95bbe4a to your computer and use it in GitHub Desktop.
Save X39/29a15d167c157e22a6f01221f95bbe4a to your computer and use it in GitHub Desktop.
Download ZIP
Quiz html "draft"
Raw
quiz.html
<html>
<head>
<style>
body {
}
.quiz {
width: 75%;
text-align: center;
margin: auto;
background: #929292;
font-family: sans-serif;
color: white;
padding: 8px;
}
.quiz pre {
display: inline-block;
margin: 0px;
}
.question {
background: #828282;
margin: 4px;
padding: 8px;
}
.answers {
counter-reset: answercounter;
list-style-type: none;
padding: 0px;
margin: 16px 0px 0px 0px;
}
.answers li {
background: #757575;
margin: 4px;
padding: 4px;
}
.answers li:nth-child(even) {
background: #676767;
}
.answers li:before{
counter-increment: answercounter;
content: counter(answercounter, upper-alpha);
margin: 0px 8px;
background: #9E9E9E;
border-radius: 20px;
width: 23px;
height: 23px;
display: inline-block;
text-align: center;
color: white;
font-family: monospace;
font-size: 20px;
}
.answers li:hover {
background: #565656;
color: white;
}
.answers li:nth-child(even):hover {
background: #565656;
color: white;
}
.answers li:hover:before {
background: #FFC107;
color: black;
}
.lockedanswer {
background: #FFC107 !important;
color: black !important;
}
.lockedanswer:before {
background: #FFC107 !important;
color: black !important;
}
.wrong {
background: #F44336 !important;
color: black !important;
transition: all 0.25s ease-out;
}
.wrong:before {
background: #F44336 !important;
color: black !important;
transition: all 0.25s ease-out;
}
.correct {
background: #4CAF50 !important;
color: white !important;
transition: all 0.25s ease-out;
}
.correct:before {
background: #4CAF50 !important;
color: white !important;
transition: all 0.25s ease-out;
}
</style>
</head>
<body>
<div class="quiz">
<div class="question">
What is the most efficient way to loop through all elements when an index is needed?
</div>
<ul class="answers">
<li class="lockedanswer"><pre>while {_i < count _arr} do { _i = _i + 1; ...}</pre></li>
<li class="correct"><pre>for "_i" from 0 to count arr do {...}</pre></li>
<li class="wrong"><pre>{...} count _arr</pre></li>
<li><pre>{...} forEach _arr</pre></li>
<li><pre>for [{_i = 0}, {_i < count _arr}, {_i = _i + 1}] do {...}</pre></li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment