My attempt at creating a quiz feature has been a challenge. I wanted each section of the quiz to open as I move through the questions. Here are the initial two parts of the quiz.
function initialize() {
var section = document.getElementsByClassName("part2")
var index = 0
while (section.length >= index) {
section[index].style.visibility = "visible";
index += 1;
}
return section
}
function question1Correct(){
document.getElementById("q1correctwrong").innerHTML="yes!"
}
function question1Wrong(){
document.getElementById("q1correctwrong").innerHTML="no"
}.part2{
visibility: collapse;
}<part1 class="part1">
<h1 style="text-align: center" class="part1">Hello!</h1>
This is a test. No pressure. Ok! Have fun!
<div class="part1"></div>
<button class="part1" onclick="initialize()">Begin!</button>
<div class="part1"></div>
</part1>
<part2 class="part2">
1+1=?
<div class="part2"></div>
<button class="part2" onclick="question1Wrong()">1</button>
<button class="part2" onclick="question1Correct()">2</button>
<p class="part2" id="q1correctwrong"></p>
</part2>Although it is functional, there are some errors being thrown:
{ "message": "Uncaught TypeError: Cannot read property 'style' of undefined", "filename": "https://stacksnippets.net/js", "lineno": 31, "colno": 11 }