The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> test questions with graphics, individual test questions with graphics only for that question
ij1962
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Dec 12 2014, 09:42 AM
Post #2


Jocular coder
********

Group: Members
Posts: 2,460
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.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 12 2014, 01:09 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 12 2014, 02:29 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 12 2014, 02:31 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 08:15 PM