...

View Full Version : Need Help: How to highlight incorrect answers in Javascript Fill-in-Blank quiz?



AdamWraith
07-03-2012, 06:07 PM
Hello! I feel like I'm getting really close to the creating a well-functioning fill-in-blank quiz, however, I am stuck on creating the last feature: highlighting those input boxes that contain incorrect answers on Submit. After hitting the submit button, a symbol or outline should highlight incorrect answers. The symbol /outline should remain in place until the user clicks on the input box.

The project can be labeled as an identification quiz as you will see in the following mockup and code. The image illustrates two ideas for an end result:
http://adamcreative.net/web_experiments/input_mockup.jpg

The following is my code so far:


<SCRIPT type="text/javascript">
answer_list = [
['Right upper', 'Right upper quadrant'],
['Left upper', 'Left upper quadrant'],
['Right lower','Right lower quadrant'],
['Left lower', 'Left lower quadrant']
];
response = [];
function setAnswer(question, answer) { response[question] = answer; }

function CheckAnswers() {
var correct = 0;
var flag, resp, answ;
for (var i = 0; i < answer_list.length; i++) {
flag = false;
for(var j=0; j<answer_list[i].length; j++){
resp = response[i].toLowerCase();
answ = answer_list[i][j].toLowerCase();
if ((resp == answ) || (answ.indexOf(resp) != -1)) { flag = true; }
}
if (flag) { correct++; }
}
if (correct == answer_list.length) {
$('.CorrectslideTogglebox').slideToggle();
}
else {
$('.IncorrectslideTogglebox').slideToggle();
}

}
</SCRIPT>
</head>
<body>
<div id="ActivityContainer">
<div class="CorrectslideTogglebox"><img src="images/Correct_Slide_Sm.png"></div>
<div class="IncorrectslideTogglebox"><img src="images/Incorrect_Slide_Sm.png"></div>

<FORM action="#" method="get">
<p><INPUT TYPE=text name="question1" size="20" maxlength="20"
onChange="setAnswer(0, this.value); turnoff('pic1')" onBlur="turnoff('pic1')" onFocus="lightup('pic1')" id="RightUpper"></p>

<p>
<input type="text" name="question2" size="20" maxlength="20"
onchange="setAnswer(1, this.value); turnoff('pic2')" onBlur="turnoff('pic2')" onFocus="lightup('pic2')" id="LeftUpper" ></p>

<p>
<input type="text" name="question3" size="20" maxlength="20"
onchange="setAnswer(2, this.value); turnoff('pic3')" onBlur="turnoff('pic3')" onFocus="lightup('pic3')" id="RightLower"></p>

<p>
<input type="text" name="question4" size="20" maxlength="20"
onchange="setAnswer(3, this.value); turnoff('pic4')" onBlur="turnoff('pic4')" onFocus="lightup('pic4')" id="LeftLower"></p>

<p><input name="submit" type="button" class="SubmitBtn" src="images/SubmitBtn_SmOFF.png" onmouseover="this.src='images/SubmitBtn_SmON.png'" onmouseout="this.src='images/SubmitBtn_SmOFF.png'" onClick="CheckAnswers()"></p>
</FORM>
</div>


Would a possible solution involve using the "addClass('incorrect_hl') or something similar to create the red outline for the input box? Am I on the right track with if ((resp != answ) ? Can you show me how I can target and affect individual input boxes using the code that I am working with?

Any help would be greatly appreciated!
-Adam

c1lonewolf
07-03-2012, 10:56 PM
You're making it too complicated for yourself.

highlighting the input boxes that contain incorrect answers on Submit





<SCRIPT type="text/javascript">
answer_list = [
['Right upper', 'Right upper quadrant'],
['Left upper', 'Left upper quadrant'],
['Right lower','Right lower quadrant'],
['Left lower', 'Left lower quadrant']
];


function check(form){
//--- loop through form inputs onsubmit ---//
// match form.element[i].value == answer_list[i] [accepted answers]
// if (incorrect) form.element[1].style='border':solid 1px red;';
//----------------------------------------//
}


<FORM name="QuizForm" action="#" method="get" onSubmit=check(this.form)">
<p><INPUT TYPE=text name="question0" size="20" maxlength="20"></p>


<p><input name="submit" type="button" class="SubmitBtn" src="images/SubmitBtn_SmOFF.png" onmouseover="this.src='images/SubmitBtn_SmON.png'" onmouseout="this.src='images/SubmitBtn_SmOFF.png'" onClick="CheckAnswers()"></p>
</FORM>



This is where you can find my form looping (http://www.webxpertz.net/forums/showthread.php/38023-Form-Validation-and-quot-mailto-quot?highlight=javascript+validate+form) function. It handles the styles but may need updating for various browsers.

AdamWraith
07-09-2012, 07:31 PM
c1lonewolf,
Thank you for your help, however, could you elaborate a little more? I am having trouble implementing your solution into my script. Are you suggesting that I replace my existing code with what you wrote or just add your suggested code to the bottom of the script? I think that I am misunderstanding your solution. Please see the areas that I indicated in green as I am not sure how I should work this into the script, or, are they just developer comments?
function check(form){
//--- loop through form inputs onsubmit ---//
// match form.element[i].value == answer_list[i] [accepted answers]
// if (incorrect) form.element[1].style='border':solid 1px red;';
//----------------------------------------//
}

Anything you could do to clarify this would be a big help. I know that it might seem like you are solving the entire problem for me, I do want to learn, however, I think that I am missing something major in my understanding of Javascript to connect this all together. I did go to your page on form looping, but I wasn't able to recreate an example with fill-in-blank properties to closely resemble my project. I will keep working on it.
Thank you,
-Adam



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum