Advice needed for validating drop down boxes

Carl
Carl used Ask the Experts™
on
Hi,

my problem that I need advice for is this: I'm developing a web page as part of an e-learning system (see attached). What happens is that the user comes to this page and along each row makes their selection from the drop down boxes. Each row has one combination which is correct. After they've made their selections for each row, they press the 'Submit' button. If they get get the right combination in each row, what I would lke to see is a coloured 'tick' appear at the end of the row. If they're wrong they get a 'cross'.

I've been trying to work this out but my scripting experience is not much. Advice/pointers/code would be much appreciated. Below is the code for the first part of the screen:
<H1>Exercise 3</H1><BR>
<P>Using Reference Designators, Border Guides and the Reference Chart, locate and identify all contacts associated with relay 'K4' to the right.</P>
<P>Note your answers in the fields below.</P><IMG style="Z-INDEX: 100; POSITION: absolute; TOP: 139px; LEFT: 513px" border=0 alt="" src="../REPOSITORY/COURSE/IMAGES/{08F0448F-3B01-4058-A68C-5069B555B345}.PNG" width=191 height=770>
<FORM NAME=vpfrmQuestion>
<P>
<select NAME='FillinA1'>
<option value="" selected>Select Contact</option>
<option value="NO75">NO75</option>
<option value="NC75">NC75</option>
<option value="NC64">NC64</option>
</select>
<select NAME='FillinA2'>
<option value="" selected>Type</option>
<option value="NO">Normally Open (NO)</option>
<option value="NC">Normally Closed (NC)</option>
</select>
<select NAME='FillinA3'>
<option value="" selected>Sheet</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select NAME='FillinA4'>
<option value="" selected>Column</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<p><input name="Submit" type="submit" />

Open in new window

Cheers

Carl
Ex-3.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Do you need client or server validation here?
If client, then be aware the student can view the source and glean the answers
CarlTechnical Writer/Trainer

Author

Commented:
It would probably be client validation here and if the student can think about viewing the source code, reading it and understanding it, then maybe they shoudl get the pass for the page ;-)
Michel PlungjanIT Expert
Top Expert 2009

Commented:
I'll whip one up for you...
Learn Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

CarlTechnical Writer/Trainer

Author

Commented:
That'd be much appreciated! :-)
Michel PlungjanIT Expert
Top Expert 2009

Commented:
DEMO

Each number is the selected index starting from 0 of the corresponding question so

A:[1,3,3,2] means
first contact, 3rd type, 3rd sheet and second column is the correct answer for question A, I assume second question would be B

I changed NAME to ID for the form

<FORM ID="vpfrmQuestion">

and added this to each set:

</select><span id="okornotA"></span>

changing A to B and so on

var answers = {
    A: [1,3,3,2],
    B: [1,4,2,2],
    C: [1,3,5,1],
    D: [1,6,2,2]
}
window.onload=function() {
  document.getElementById("vpfrmQuestion").onsubmit=function() {
    for (var answer in answers) {
      document.getElementById("okornot"+answer).innerHTML='';
      for (var i=1,cnt=0;i<=4;i++) {
        if (this["Fillin"+answer+i].selectedIndex==answers[answer][i-1]) {
          cnt++;
        }
      }
      document.getElementById("okornot"+answer).innerHTML=(cnt==3)?'<img src="tick.gif">':'<img src="cross.gif">';
    }
  }
}    

Open in new window

Michel PlungjanIT Expert
Top Expert 2009

Commented:
CarlTechnical Writer/Trainer

Author

Commented:
Ahh, yes. I was looking through both forums for guidance or inspiration so I thought I'd post to both and try and pick up different audiences.

Thanks, but I'm going to have to come back to you - I need some time to go through and understand what you've done.

Cheers!
IT Expert
Top Expert 2009
Commented:
I had a typo so I attached a new version

Here is a demo

I am not sure if you want to submit the form if all are ok.

change
    // return numberOfQuestions==okAnswers; // submit if all are ok
      return false; // do not submit.
to
     return numberOfQuestions==okAnswers; // submit if all are ok
    //  return false; // do not submit.

to have the form submit if all are ok



Here is an updated version

var tick = '<img height="15" src="http://www.voodish.co.uk/articles/v-content/uploads/2009/09/tick_small.gif" />';
var cross = '<img height="15" src="http://vitalcentral.com/vvimages/cross.gif"/>';
var answers = {
    A: [1,1,3,2],
    B: [1,2,2,2],
    C: [1,1,5,1],
    D: [1,2,2,2]
}
window.onload=function() {
  document.getElementById("vpfrmQuestion").onsubmit=function() {
    var okAnswers = 0;
    var numberOfQuestions=0;
    for (var answer in answers) {
      numberOfQuestions++;
      for (var i=1,cnt=0;i<=4;i++) {
        if (this["Fillin"+answer+i].selectedIndex==answers[answer][i-1]) {
          cnt++; // count an ok answer
        }
      }
      if (cnt==3) okAnswers++; // count the ok sets of answers
      document.getElementById("okornot"+answer).innerHTML=(cnt==3)?tick:cross;
    }
    // return numberOfQuestions==okAnswers; // submit if all are ok
      return false; // do not submit. 
  }
}    

Open in new window

CarlTechnical Writer/Trainer

Author

Commented:
Thanks for your help, it really is appreciated. After reading through it a number of times and looking at your demo, I understand what you've done - not that I'll be able to do it myself ;-) - but thanks again.

Cheers

Carl
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Do you need miter explanation and does it do what you needed?
CarlTechnical Writer/Trainer

Author

Commented:
Looking at your demo I can see that it does what I want it to do, I just need to get it to work on the system I'm working with. But I'm confident that all will be ok.

Once again, many thanks for your help.

Cheers
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Great. My email is in my profile should need it
CarlTechnical Writer/Trainer

Author

Commented:
Thanks for that! BTW, what part of the planet are you on?
Michel PlungjanIT Expert
Top Expert 2009

Commented:
I am in Holland (but am Danish)
CarlTechnical Writer/Trainer

Author

Commented:
I was curious - you keep strange hours considering I'm in Australia. Enjoy spring!
CarlTechnical Writer/Trainer

Author

Commented:
I need some more advice re your solution. I know I've already awarded points and I can't see how I can reopen this question (any advice on how to do it would be good), but as this is your solution I felt that you're the best one to answer this. I'm happy to open a new question.

The user will get the ticks showing he's correct IF he makes the selections according to the order set in the variable - what if his selection is not in the same order as the variable? How can you account for that? I had orignally been thinking of nested 'if ... else' statements which is what put me off continuing.

Advice appreciated.
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Not sure what you mean.
I now only test the answer onsubmit as required in the original question
If you want, I could test when the user has changed all 4 in whatever order and test again if he changes his mind making the ticks or xs appear as he finishes each row.
CarlTechnical Writer/Trainer

Author

Commented:
That's fine, that was the original question I asked and that works. In thinking more about how the user interacts with the page I need to take into account the fact that they may not answer in the order I want. With the current variable 'answers' the user needs to enter his response so that what he enters in the first row equals what is in the array 'A' in the variable - what if he were to enter his response so that instead of it being array 'A' it's now array 'C'? I.e

current
var answers = {
    A: [1,1,3,2],
    B: [1,2,2,2],
    C: [1,1,5,1],
    D: [1,2,2,2]
}

proposed
var answers = {
    A: [1,2,2,2],
    B: [1,1,3,2],
    C: [1,2,2,2],
    D: [1,1,5,1]
}

How can we capture the fact that the user may enter the correct answers, just not in the same rows? I hope this makes it clearer.

Thanks
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Ohhh - that is a complication I did not see coming.

So ANY of the answers can match ANY of the rows

I of course assumed that answer A matched row A

So the answers can be in any order - so the diagram has X number of answers you give on X rows but in any order? So if the user can only give 4 rows out of 5?
Is it still correct if just one row out of 5 is matching one of the array entries?

Then your job is to give acceptable combinations and I can run over the answers given and see which matches and give a cross if a suggestion does not match any of your suggestions


I will be offline for a while since I am taking half a day off so I will not be online to code until this afternoon...

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial