Check exam 2

Question goes here.

body{ padding: 0; margin: 0; width:100vw; height: 100vh; } .panel{ height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .question-container{ margin: 10px; padding: 5px; width: 80vw; height: 10vh; background-color: #c7dddf; font-size: x-large; text-align: center; } .result{ margin: 10px; padding: 5px; width:80vw; height: 10vh; text-align: center; font-size: 50px; } .option-container{ display: flex; justify-content: space-around; margin: 10px; padding: 5px; width: 80vw; height: 20vh; background-color: #9eb1b3; } .option{ padding: 10px; width: 15vw; height: 10vh; font-size: larger; background-color: lightskyblue; border-radius: 25%; } .option:hover{ background-color: lightgoldenrodyellow; } .navigation{ width: 80vw; height: 10vh; margin: 10px; padding: 5px; display: flex; justify-content: space-around; background-color:#c7dddf; } .evaluate,.next{ width:30vw; height: 8vh; padding: 5px; font-size: larger; } .evaluate{ background-color: #50DBB4; } .next{ color: white; background-color: #BF3325; } // Questions will be asked const Questions = [{ id: 0, q: "What is capital of India?", a: [{ text: "gandhinagar", isCorrect: false }, { text: "Surat", isCorrect: false }, { text: "Delhi", isCorrect: true }, { text: "mumbai", isCorrect: false } ] }, { id: 1, q: "What is the capital of Thailand?", a: [{ text: "Lampang", isCorrect: false, isSelected: false }, { text: "phuket", isCorrect: false }, { text: "Ayutthaya", isCorrect: false }, { text: "Bangkok", isCorrect: true } ] }, { id: 2, q: "What is the capital of Gujarat", a: [{ text: "surat", isCorrect: false }, { text: "vadodara", isCorrect: false }, { text: "gandhinagar", isCorrect: true }, { text: "rajkot", isCorrect: false } ] } ] // Set start var start = true; // Iterate function iterate(id) { // Getting the result display section var result = document.getElementsByClassName("result"); result[0].innerText = ""; // Getting the question const question = document.getElementById("question"); // Setting the question text question.innerText = Questions[id].q; // Getting the options const op1 = document.getElementById('op1'); const op2 = document.getElementById('op2'); const op3 = document.getElementById('op3'); const op4 = document.getElementById('op4'); // Providing option text op1.innerText = Questions[id].a[0].text; op2.innerText = Questions[id].a[1].text; op3.innerText = Questions[id].a[2].text; op4.innerText = Questions[id].a[3].text; // Providing the true or false value to the options op1.value = Questions[id].a[0].isCorrect; op2.value = Questions[id].a[1].isCorrect; op3.value = Questions[id].a[2].isCorrect; op4.value = Questions[id].a[3].isCorrect; var selected = ""; // Show selection for op1 op1.addEventListener("click", () => { op1.style.backgroundColor = "lightgoldenrodyellow"; op2.style.backgroundColor = "lightskyblue"; op3.style.backgroundColor = "lightskyblue"; op4.style.backgroundColor = "lightskyblue"; selected = op1.value; }) // Show selection for op2 op2.addEventListener("click", () => { op1.style.backgroundColor = "lightskyblue"; op2.style.backgroundColor = "lightgoldenrodyellow"; op3.style.backgroundColor = "lightskyblue"; op4.style.backgroundColor = "lightskyblue"; selected = op2.value; }) // Show selection for op3 op3.addEventListener("click", () => { op1.style.backgroundColor = "lightskyblue"; op2.style.backgroundColor = "lightskyblue"; op3.style.backgroundColor = "lightgoldenrodyellow"; op4.style.backgroundColor = "lightskyblue"; selected = op3.value; }) // Show selection for op4 op4.addEventListener("click", () => { op1.style.backgroundColor = "lightskyblue"; op2.style.backgroundColor = "lightskyblue"; op3.style.backgroundColor = "lightskyblue"; op4.style.backgroundColor = "lightgoldenrodyellow"; selected = op4.value; }) // Grabbing the evaluate button const evaluate = document.getElementsByClassName("evaluate"); // Evaluate method evaluate[0].addEventListener("click", () => { if (selected == "true") { result[0].innerHTML = "True"; result[0].style.color = "green"; } else { result[0].innerHTML = "False"; result[0].style.color = "red"; } }) } if (start) { iterate("0"); } // Next button and method const next = document.getElementsByClassName('next')[0]; var id = 0; next.addEventListener("click", () => { start = false; if (id < 2) { id++; iterate(id); console.log(id); } })