test questions with graphics, individual test questions with graphics only for that question |
test questions with graphics, individual test questions with graphics only for that question |
ij1962 |
Dec 12 2014, 09:22 AM
Post
#1
|
Group: Members Posts: 1 Joined: 12-December 14 Member No.: 21,932 |
Hi,
I am new to this area so any help would be greatly appreciated. I am writing a test paper for students and would like to introduce graphics for each individual question, so when the question is answered the next question is brought up onto the screen. The code is as below: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <h1><b><FONT COLOR="#0000FF">Exam No. Three Re-establishing Gas Supplies</FONT></b></h1> <style> div#test{ border:#000 1px solid; padding:10px 40px 40px 40px; } </style> <script> var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, chD, correct = 0; var questions = [ [ "When it comes to the gas combustion requirements of a domestic natural gas appliance we are w anting to establish 2 things. They Are:", "The gas appliance is getting the correct amount of gas at the correct pressure.", "The gas appliance is getting the correct amount of gas", "The gas appliance is getting the correct amount of air.", "The gas appliance is getting the correct pressure", "A" ], [ "How do we determine the resistance of the pipework and any tees or bends relative to pipework sizing?", "By calculating its diameter.", "By calculating its gerneral size.", "By calculating its equivalent length.", "Making a guess at its size.", "C" ], [ "If we carried out a Gas Inlet G20 Operating Pressure test at a new gas appliance just installed as part of the commission with a result of 19mb, what is the maximum Operating Pressure (Working Pressure) we should expect to find at the meter??", "19mbar", "20mbar", "23mbar", "21mbar.", "D" ], [ "Before installing new pipework to an installation, you carry out a gas operating pressure test (Working Pressure) at the meter. Your U-Gauge (Manometer) reads 21mb. When you have finished your pipwork design what is the intended pressure you are designing at the appliance inlet, and what should you find under test?", "19mabr", "23mbar", "21mabr", "20mbar", "D" ], [ "Who you ask ?", "a", "b", "c", "d", "C" ], ]; function _(x){ return document.getElementById(x); } function renderQuestion(){ test = _("test"); if(pos >= questions.length){ test.innerHTML = "<h2>You got "+correct+" out of "+questions.length+" questions correct</h2>"; _("test_status").innerHTML = "Test Completed"; pos = 0; correct = 0; return false; } _("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]; chD = questions[pos][4]; test.innerHTML = "<h3>"+question+"</h3>"; 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>"; test.innerHTML += "<input type='radio' name='choices' value='D'> "+chD+"<br><br>"; test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>"; } function checkAnswer(){ choices = document.getElementsByName("choices"); for(var i=0; i<choices.length; i++){ if(choices[i].checked){ choice = choices[i].value; } } if(choice == questions[pos][5]){ correct++; } pos++; renderQuestion(); } window.addEventListener("load", renderQuestion, false); </script> </head> <body> <h2 id="test_status"></h2> <div id="test"></div> </body> </html> Cheers for any help you can offer |
Brian Chandler |
Dec 12 2014, 09:42 AM
Post
#2
|
Jocular coder Group: Members Posts: 2,476 Joined: 31-August 06 Member No.: 43 |
Why not simply use one page for each question? (If this is a prewritten javascript "application", you will probably find it easier to start again.)
|
pandy |
Dec 12 2014, 01:09 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
|
Christian J |
Dec 12 2014, 02:29 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
I am writing a test paper for students Is it for self-testing only? The script will not send the result to any teacher, while at the same time students can cheat by viewing source... QUOTE would like to introduce graphics for each individual question That can be done relatively easy. First, add the URL of each image at the end of each question's array entry. In the first question below I've added the URL "foo.jpg", add similar URLs in every question: CODE [ "When it comes to the gas combustion requirements of a domestic natural gas appliance we are w anting to establish 2 things. They Are:", "The gas appliance is getting the correct amount of gas at the correct pressure.", "The gas appliance is getting the correct amount of gas", "The gas appliance is getting the correct amount of air.", "The gas appliance is getting the correct pressure", "A", "foo.jpg" ], Next, define a "pic" variable to get the image URL from the array items: CODE question = questions[pos][0]; chA = questions[pos][1]; chB = questions[pos][2]; chC = questions[pos][3]; chD = questions[pos][4]; pic = questions[pos][6]; Next, insert an IMG element (with the ID "pic" in case you want to style it with CSS). I put it between the H3 element and the radio buttons, but you can place it anywhere in the page that's valid HTML: CODE test.innerHTML = "<h3>"+question+"</h3>"; test.innerHTML += "<img src='"+pic+"' id='pic' alt=''>"; 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>"; test.innerHTML += "<input type='radio' name='choices' value='D'> "+chD+"<br><br>"; test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>"; Sidenote: CODE <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <h1><b><FONT COLOR="#0000FF">Exam No. Three Re-establishing Gas Supplies</FONT></b></h1> The H1 element is not allowed there, it must be in the BODY section. Perhaps you could use the TITLE element instead? http://www.w3.org/TR/html4/struct/global.html#edef-TITLE |
Christian J |
Dec 12 2014, 02:31 PM
Post
#5
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
|
Lo-Fi Version | Time is now: 24th September 2024 - 08:25 PM |