Help - Search - Members - Calendar
Full Version: test questions with graphics
HTMLHelp Forums > Programming > Client-side Scripting
ij1962
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
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
QUOTE(ij1962 @ Dec 12 2014, 03:22 PM) *

would like to introduce graphics for each individual question, so when the question is answered the next question is brought up onto the screen


Could you please explain the above. Graphics?
Christian J
QUOTE(ij1962 @ Dec 12 2014, 03:22 PM) *

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
QUOTE(Brian Chandler @ Dec 12 2014, 03:42 PM) *

Why not simply use one page for each question?

The script also keeps track of the student's answers.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.