Here is some code for a simple Quiz program written in JavaScript:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Quiz</title> <style> div#test{ border:#000 1px solid; padding:10px 40px 40px 40px; } </style> <script type="text/javascript"> // pos is position of where the user in the test or which question they're up to var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0; // this is a multidimensional array with 4 inner array elements with 5 elements inside them // if you don't want answers viewable in the code, then you should use PHP and mySQL database var questions = [ ["What is 5 + 4?", "10", "9", "7", "B"], ["What is 15 - 3?", "11", "13", "12", "C"], ["What is 6 x 4?", "24", "26", "21", "A"], ["What is 16 / 4?", "6", "3", "4", "C"] ]; // this get function is short for the getElementById function function get(x){ return document.getElementById(x); } function renderQuestion(){ test = get("test"); if(pos >= questions.length){ test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>"; get("test_status").innerHTML = "Test completed"; // resets the variable to allow users to restart the test pos = 0; correct = 0; // stops rest of renderQuestion function running when test is completed return false; } get("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length; question = questions[pos][0]; chA = questions[pos][1]; chB = questions[pos][2]; chC = questions[pos][3]; test.innerHTML = "<h3>"+question+"</h3>"; // the += appends to the data we started on the line above test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>"; test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>"; test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>"; test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>"; } function checkAnswer(){ // use getElementsByName because we have an array which it will loop through choices = document.getElementsByName("choices"); for(var i=0; i<choices.length; i++){ if(choices[i].checked){ choice = choices[i].value; } } // checks if answer matches the correct choice if(choice == questions[pos][4]){ //each time there is a correct answer this value increases correct++; } // changes position of which character user is on pos++; // then the renderQuestion function runs again to go to next question renderQuestion(); } window.addEventListener("load", renderQuestion, false); </script> </head> <body> <h2 id="test_status"></h2> <div id="test"></div> </body> </html> |