/    Sign up×
Community /Pin to ProfileBookmark

Live Quiz Display with Answer Matrix – HELP!

Copy linkTweet thisAlerts:
Jul 05.2005

[B]Guys I really need your help here,[/B]I posted about this previously but I don’t think I made clear enough what I’m tryin to do.

I’m looking to write a page where you can pick from 4 yes or no questions using radio buttons and it will give you the answer & statement after all the questions have been entered.
I Want to try to do it without a submit button and for it to show a reliant statement underneath the radio buttons.

How can I do this?

[B]NONE WORKING PAGE DESIGN HERE TO GIVE YOU A CLEAR IDEA OF PAGE:[/B]

[CODE]<html>
<head>
</head>
<body>
<table width=”560″ border=”0″ align=”center” cellpadding=”2″ cellspacing=”0″>
<tr valign=”top”>
<td height=”119″><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”2″>
<tr valign=”top”>
<td width=”3%” nowrap>&nbsp;</td>
<td width=”72%” nowrap>&nbsp;</td>
<td width=”13%” nowrap><div align=”center”></div></td>
<td width=”5%” nowrap><p align=”center”><strong>YES</strong></p></td>
<td width=”3%” nowrap><div align=”center”></div></td>
<td width=”4%” nowrap><p align=”center”><strong>NO</strong></p></td>
</tr>
<tr valign=”top”>
<td nowrap><p>1.</p></td>
<td nowrap><p>Question 1 here </p></td>
<td nowrap><div align=”center”></div></td>
<td valign=”middle” nowrap><div align=”center”>
<input name=”q1″ type=”radio” value=”YES”>
</div></td>
<td valign=”middle” nowrap><div align=”center”></div></td>
<td valign=”middle” nowrap><div align=”center”>
<input name=”q1″ type=”radio” value=”NO”>
</div></td>
</tr>
<tr valign=”top”>
<td nowrap><p>2.</p></td>
<td nowrap><p>Question 2 here </p></td>
<td nowrap><div align=”center”></div></td>
<td valign=”middle” nowrap><div align=”center”>
<input name=”q2″ type=”radio” value=”YES”>
</div></td>
<td valign=”middle” nowrap><div align=”center”></div></td>
<td valign=”middle” nowrap><div align=”center”>
<input name=”q2″ type=”radio” value=”NO”>
</div></td>
</tr>
<tr valign=”top”>
<td nowrap><p>3.</p></td>
<td nowrap><p>Question 3 here </p></td>
<td nowrap><div align=”center”></div></td>
<td valign=”middle” nowrap><div align=”center”>
<input name=”q3″ type=”radio” value=”YES”>
</div></td>
<td valign=”middle” nowrap><div align=”center”></div></td>
<td valign=”middle” nowrap><div align=”center”>
<input name=”q3″ type=”radio” value=”NO”>
</div></td>
</tr>
<tr valign=”top”>
<td nowrap><p>4.</p></td>
<td nowrap><p>Question 4 here </p></td>
<td nowrap><div align=”center”></div></td>
<td valign=”middle” nowrap><div align=”center”>
<input name=”q4″ type=”radio” value=”YES”>
</div></td>
<td valign=”middle” nowrap><div align=”center”></div></td>
<td valign=”middle” nowrap><div align=”center”>
<input name=”q4″ type=”radio” value=”NO”>
</div></td>
</tr>
</table></td>
</tr>
</table>
<br>
<table width=”1″ border=”1″ align=”center” cellpadding=”0″ cellspacing=”0″ bordercolor=”#000000″>
<tr>
<td width=”500″><table width=”560″ border=”0″ align=”center” cellpadding=”2″ cellspacing=”0″>
<tr valign=”middle”>
<td width=”13%”><p>Decision:</p></td>
<td width=”87%”><strong>CORRECT / CLOSE / WRONG </strong></td>
</tr>
<tr valign=”top”>
<td colspan=”2″><p>Statement: <br>
“Well done you are correct with your choices, thankyou for taking your time” <br>
/<br>
“So close but you didn’t get it” <br>
/<br>
“Sorry you wern’t good enough at all!” <br>
</p></td>
</tr>
</table></td>
</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>[/CODE]

[B]HOW IT SHOULD WORK:[/B]

Basically the raido button answer choices are:

[INDENT]Q1: YES or NO
Q2: YES or NO
Q3: YES or NO
Q4: YES or NO[/INDENT]

Statements possibly shown are:

[INDENT][U]Correct[/U]
“Well done you are correct with your choices, thankyou for taking your time”
[U]Close[/U]
“So close but you didn’t get it”
[U]Wrong[/U]
“Sorry you wern’t good enough at all!”[/INDENT]

Questions and resulatant reference each others answers
Answer matrix is:

[INDENT][B]Q1 – Q2 – Q3 – Q4 – Answer[/B]
Y – N – N – N – WRONG
Y – N – Y – Y – CLOSE
Y – N – Y – N – CLOSE
Y – Y – N – Y – CLOSE
Y – Y – N – N – CLOSE
Y – Y – Y – Y – CORRECT
Y – Y – Y – N – CORRECT
N – N – N – Y – WRONG
N – N – N – N – WRONG
N – N – Y – Y – CLOSE
N – N – Y – N – CLOSE
N – Y – N – Y – CLOSE
N – Y – N – N – CLOSE
N – Y – Y – Y – CORRECT
N – Y – Y – N – CORRECT[/INDENT]

Also I want the answer to be a hidden variable to be passed to another part of the form.

[I]Guys can you help me with this I’m really stuck!
Thanks![/I]

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@crh3675Jul 05.2005 — <i>
</i>

&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript"&gt;

var WRONG="Sorry you wern't good enough at all!";
var CORRECT="Well done you are correct with your choices, thankyou for taking your time";
var CLOSE="So close but you didn't get it";

var refMatrix=Array(
"Y,N,N,N,WRONG",
"Y,N,Y,Y,CLOSE",
"Y,N,Y,N,CLOSE",
"Y,Y,N,Y,CLOSE",
"Y,Y,N,N,CLOSE",
"Y,Y,Y,Y,CORRECT",
"Y,Y,Y,N,CORRECT",
"N,N,N,Y,WRONG",
"N,N,N,N,WRONG",
"N,N,Y,Y,CLOSE",
"N,N,Y,N,CLOSE",
"N,Y,N,Y,CLOSE",
"N,Y,N,N,CLOSE",
"N,Y,Y,Y,CORRECT",
"N,Y,Y,N,CORRECT");



function runCheck(){
var frmResults="";
var f=document.forms[0];
var msg="";
for(i=0;i&lt;f.elements.length;i++){
if(f.elements[i].type.toLowerCase()=="radio"){
if(f.elements[i].checked){
frmResults+=frmResults!="" ? "," : "";
frmResults+=f.elements[i].value=="YES" ? "Y" : "N";
}
}
}

<i> </i>for(i=0;i&lt;refMatrix.length;i++){
<i> </i> var regex=eval("/^"+frmResults+"/");
<i> </i> if(refMatrix[i].match(regex)){
<i> </i> var parts=refMatrix[i].split(",");
<i> </i> var msg=eval(parts[parts.length-1]);
<i> </i> }
<i> </i>}
<i> </i>alert(msg);

}

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form&gt;
&lt;table width="560" border="0" align="center" cellpadding="2" cellspacing="0"&gt;
&lt;tr valign="top"&gt;
&lt;td height="119"&gt;&lt;table width="100%" border="0" cellspacing="0" cellpadding="2"&gt;
&lt;tr valign="top"&gt;
&lt;td width="3%" nowrap&gt;&amp;nbsp;&lt;/td&gt;
&lt;td width="72%" nowrap&gt;&amp;nbsp;&lt;/td&gt;
&lt;td width="13%" nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td width="5%" nowrap&gt;&lt;p align="center"&gt;&lt;strong&gt;YES&lt;/strong&gt;&lt;/p&gt;&lt;/td&gt;
&lt;td width="3%" nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td width="4%" nowrap&gt;&lt;p align="center"&gt;&lt;strong&gt;NO&lt;/strong&gt;&lt;/p&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr valign="top"&gt;
&lt;td nowrap&gt;&lt;p&gt;1.&lt;/p&gt;&lt;/td&gt;
&lt;td nowrap&gt;&lt;p&gt;Question 1 here &lt;/p&gt;&lt;/td&gt;
&lt;td nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;
&lt;input name="q1" type="radio" value="YES"&gt;
&lt;/div&gt;&lt;/td&gt;
&lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;
&lt;input name="q1" type="radio" value="NO"&gt;
&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr valign="top"&gt;
&lt;td nowrap&gt;&lt;p&gt;2.&lt;/p&gt;&lt;/td&gt;
&lt;td nowrap&gt;&lt;p&gt;Question 2 here &lt;/p&gt;&lt;/td&gt;
&lt;td nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;
&lt;input name="q2" type="radio" value="YES"&gt;
&lt;/div&gt;&lt;/td&gt;
&lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;
&lt;input name="q2" type="radio" value="NO"&gt;
&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr valign="top"&gt;
&lt;td nowrap&gt;&lt;p&gt;3.&lt;/p&gt;&lt;/td&gt;
&lt;td nowrap&gt;&lt;p&gt;Question 3 here &lt;/p&gt;&lt;/td&gt;
&lt;td nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;
&lt;input name="q3" type="radio" value="YES"&gt;
&lt;/div&gt;&lt;/td&gt;
&lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;
&lt;input name="q3" type="radio" value="NO"&gt;
&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr valign="top"&gt;
&lt;td nowrap&gt;&lt;p&gt;4.&lt;/p&gt;&lt;/td&gt;
&lt;td nowrap&gt;&lt;p&gt;Question 4 here &lt;/p&gt;&lt;/td&gt;
&lt;td nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;
&lt;input name="q4" type="radio" value="YES" onclick="runCheck()"&gt;
&lt;/div&gt;&lt;/td&gt;
&lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;
&lt;input name="q4" type="radio" value="NO" onclick="runCheck()"&gt;
&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;br&gt;
&lt;table width="1" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000"&gt;
&lt;tr&gt;
&lt;td width="500"&gt;&lt;table width="560" border="0" align="center" cellpadding="2" cellspacing="0"&gt;
&lt;tr valign="middle"&gt;
&lt;td width="13%"&gt;&lt;p&gt;Decision:&lt;/p&gt;&lt;/td&gt;
&lt;td width="87%"&gt;&lt;strong&gt;CORRECT / CLOSE / WRONG &lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr valign="top"&gt;
&lt;td colspan="2"&gt;&lt;p&gt;Statement: &lt;br&gt;
"Well done you are correct with your choices, thankyou for taking your time" &lt;br&gt;
/&lt;br&gt;
"So close but you didn't get it" &lt;br&gt;
/&lt;br&gt;
"Sorry you wern't good enough at all!" &lt;br&gt;
&lt;/p&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@gowans007authorJul 05.2005 — [I][B]Thanks! however it inst quite right.[/B][/I]

  • - The questions maybe answerd in any order so the answer must be displayed once all four questions have been selected.

  • - The resultant answer must not be shown in a pop up but in that section of the page under the buttons.


    • I have sucessfully done this with the querstions on one page and answer on another using ASP and weighin the answers

    Q1 = 1

    Q2 = 8

    Q3 = 6

    Q4 = 4

    if total :

    0-4 = Wrong

    5 - 13 = Close

    14 - 19 = Correct

    however I wanted to use the advanced a live poweres of JavaScript to do this instantly on one page with no submit.

    [B]CAN THIS BE DONE????[/B]
    Copy linkTweet thisAlerts:
    @crh3675Jul 05.2005 — <i>
    </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"&gt;
    &lt;html&gt;
    &lt;head&gt;
    &lt;script type="text/javascript"&gt;

    var WRONG="Sorry you wern't good enough at all!";
    var CORRECT="Well done you are correct with your choices, thankyou for taking your time";
    var CLOSE="So close but you didn't get it";

    var refMatrix=Array(
    "Y,N,N,N,WRONG",
    "Y,N,Y,Y,CLOSE",
    "Y,N,Y,N,CLOSE",
    "Y,Y,N,Y,CLOSE",
    "Y,Y,N,N,CLOSE",
    "Y,Y,Y,Y,CORRECT",
    "Y,Y,Y,N,CORRECT",
    "N,N,N,Y,WRONG",
    "N,N,N,N,WRONG",
    "N,N,Y,Y,CLOSE",
    "N,N,Y,N,CLOSE",
    "N,Y,N,Y,CLOSE",
    "N,Y,N,N,CLOSE",
    "N,Y,Y,Y,CORRECT",
    "N,Y,Y,N,CORRECT");



    function runCheck(){
    var frmResults="";
    var f=document.forms[0];
    var msg="";
    var radcount=0;
    var chkcount=0;
    var lastrad="";
    for(i=0;i&lt;f.elements.length;i++){
    if(f.elements[i].type.toLowerCase()=="radio"){
    if(lastrad==f.elements[i].name){
    radcount++;
    }

    <i> </i> if(f.elements[i].checked){
    <i> </i> chkcount++;
    <i> </i> frmResults+=frmResults!="" ? "," : "";
    <i> </i> frmResults+=f.elements[i].value=="YES" ? "Y" : "N";
    <i> </i> }
    <i> </i> lastrad=f.elements[i].name;
    <i> </i> }
    <i> </i>}

    <i> </i>if(radcount==chkcount){
    <i> </i> for(i=0;i&lt;refMatrix.length;i++){
    <i> </i> var regex=eval("/^"+frmResults+"/");
    <i> </i> if(refMatrix[i].match(regex)){
    <i> </i> var parts=refMatrix[i].split(",");
    <i> </i> var msg=eval(parts[parts.length-1]);
    <i> </i> }
    <i> </i> }
    <i> </i> document.getElementById("quizResults").innerHTML=msg;
    <i> </i> document.getElementById("quizResults").style.display="block";
    <i> </i> setTimeout("document.getElementById("quizResults").style.display="none";",2000);

    <i> </i>}

    }

    function setRadio(){
    var f=document.forms[0];
    for(i=0;i&lt;f.elements.length;i++){
    if(f.elements[i].type.toLowerCase()=="radio"){
    if(document.all){
    f.elements[i].attachEvent("onclick",runCheck);
    }else{
    f.elements[i].addEventListener("click",runCheck,false);
    }
    }
    }
    }


    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onload="setRadio()"&gt;
    &lt;form&gt;
    &lt;table width="560" border="0" align="center" cellpadding="2" cellspacing="0"&gt;
    &lt;tr valign="top"&gt;
    &lt;td height="119"&gt;&lt;table width="100%" border="0" cellspacing="0" cellpadding="2"&gt;
    &lt;tr valign="top"&gt;
    &lt;td width="3%" nowrap&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td width="72%" nowrap&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td width="13%" nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;td width="5%" nowrap&gt;&lt;p align="center"&gt;&lt;strong&gt;YES&lt;/strong&gt;&lt;/p&gt;&lt;/td&gt;
    &lt;td width="3%" nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;td width="4%" nowrap&gt;&lt;p align="center"&gt;&lt;strong&gt;NO&lt;/strong&gt;&lt;/p&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr valign="top"&gt;
    &lt;td nowrap&gt;&lt;p&gt;1.&lt;/p&gt;&lt;/td&gt;
    &lt;td nowrap&gt;&lt;p&gt;Question 1 here &lt;/p&gt;&lt;/td&gt;
    &lt;td nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;
    &lt;input name="q1" type="radio" value="YES"&gt;
    &lt;/div&gt;&lt;/td&gt;
    &lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;
    &lt;input name="q1" type="radio" value="NO"&gt;
    &lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr valign="top"&gt;
    &lt;td nowrap&gt;&lt;p&gt;2.&lt;/p&gt;&lt;/td&gt;
    &lt;td nowrap&gt;&lt;p&gt;Question 2 here &lt;/p&gt;&lt;/td&gt;
    &lt;td nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;
    &lt;input name="q2" type="radio" value="YES"&gt;
    &lt;/div&gt;&lt;/td&gt;
    &lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;
    &lt;input name="q2" type="radio" value="NO"&gt;
    &lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr valign="top"&gt;
    &lt;td nowrap&gt;&lt;p&gt;3.&lt;/p&gt;&lt;/td&gt;
    &lt;td nowrap&gt;&lt;p&gt;Question 3 here &lt;/p&gt;&lt;/td&gt;
    &lt;td nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;
    &lt;input name="q3" type="radio" value="YES"&gt;
    &lt;/div&gt;&lt;/td&gt;
    &lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;
    &lt;input name="q3" type="radio" value="NO"&gt;
    &lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr valign="top"&gt;
    &lt;td nowrap&gt;&lt;p&gt;4.&lt;/p&gt;&lt;/td&gt;
    &lt;td nowrap&gt;&lt;p&gt;Question 4 here &lt;/p&gt;&lt;/td&gt;
    &lt;td nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;
    &lt;input name="q4" type="radio" value="YES"&gt;
    &lt;/div&gt;&lt;/td&gt;
    &lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;td valign="middle" nowrap&gt;&lt;div align="center"&gt;
    &lt;input name="q4" type="radio" value="NO"&gt;
    &lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;

    &lt;div id="quizResults" style="margin-left:auto;margin-right:auto;border:thin solid black;width:540px;text-align:center;display:none"&gt;&lt;/div&gt;

    &lt;/form&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    Copy linkTweet thisAlerts:
    @oublessJul 05.2005 — edit: ? never matter
    Copy linkTweet thisAlerts:
    @gowans007authorJul 05.2005 — The above code is exactly what I want, just converting it over now for the look and feel I have for the page Thanks!

    [B]But I have one problem! the text that is displayed can pop away and dissapear after the options have been selected, it needs to remain on the page.[/B]

    [B][I]How can I fix it and stop it from disapearing after seconds?[/I][/B]
    Copy linkTweet thisAlerts:
    @crh3675Jul 05.2005 — Remove the setTimout line of code
    Copy linkTweet thisAlerts:
    @gowans007authorJul 05.2005 — Thankyou that is awesome!

    Your A STAR!!!
    ×

    Success!

    Help @gowans007 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...