Skip to content

Instantly share code, notes, and snippets.

@pbuzdin

pbuzdin/quiz.htm

Created October 27, 2021 00:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pbuzdin/fff015115ce2b98bd1e51b7ecec3a850 to your computer and use it in GitHub Desktop.
Save pbuzdin/fff015115ce2b98bd1e51b7ecec3a850 to your computer and use it in GitHub Desktop.
Download ZIP
simple css+js quiz
Raw
quiz.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>quiz</title>
</head>
<body>
<style>
[name^="sp-r1"],
[name^="sp-r2"] {
opacity: 0;
pointer-events: none;
}
[data-spa*="q1"] [name^="sp-q1"],
[data-spa*="q2"] [name^="sp-q2"] {
pointer-events: none;
}
[data-spresults="2"] [name^="sp-r1"],
[data-spresults="3"] [name^="sp-r1"],
[data-spresults="4"] [name^="sp-r2"] {
opacity: 1;
pointer-events: all;
}
</style>
<h3>prefix-question-question_answer-answer_weight</h3>
<p name="sp-q1-1-1">sp-q1-1-1</p>
<p name="sp-q1-2-2">sp-q1-2-2</p>
<p name="sp-q2-1-1">sp-q2-1-1</p>
<p name="sp-q2-2-2">sp-q2-2-2</p>
<h3 name="sp-r1">results 1</h3>
<h3 name="sp-r2">results 2</h3>
<script>
// <p name="sp-q1-1-1">answer text 1</p>
document.querySelectorAll('[name^="sp-q"]').forEach((el) => {
document.body.dataset.spresults = 0
document.body.dataset.spa = ''
el.addEventListener('click', (event) => {
var w = parseInt(event.target.getAttribute('name').split('-').pop())
//active answer is clickable
if (event.target.style.pointerEvents) {
event.target.style.pointerEvents = ''
} else {
event.target.style.pointerEvents = 'all'
}
//disable question
if (document.body.dataset.spa.includes(event.target.getAttribute('name').split('-')[1])) {
document.body.dataset.spa = document.body.dataset.spa.replace(event.target.getAttribute('name').split(
'-')[1], "")
document.body.dataset.spresults = parseInt(document.body.dataset.spresults) - w
} else {
document.body.dataset.spa += event.target.getAttribute('name').split('-')[1]
document.body.dataset.spresults = parseInt(document.body.dataset.spresults) + w
}
})
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment