[RESOLVED] Multiple Select Drop-downs with Same Options

@mousebearJan 27.2007

I just can’t seem to figure out a search criteria that will point me to a thread that covers this. I have about 30 select boxes with the same exact options list. It’s a worksheet where kids are supposed to match elements from 2 columns of data. The column on the right stays fixed. The column on the left are Select Boxes with a list of all the possible answers. The kids pick from the list and correct answers are identified with a js function. The answer checking part I’ve got working fine.

I’d rather not repeat the code for 30 identical select boxes with 30 identical options. I guess if I have to, I will. The only difference in the Select objects are their Name=xxx.

Oh, and I did just find a few things elsewhere on the web, but I think it’s important to note that these select boxes are tabledata in one table with 2 columns. So a second tabledata element with text descriptions needs to follow each select box. I am thinking that might narrow down the useful approaches.

Any ideas?

to post a comment

JavaScript

19 Comments(s) _↴

@vwphillipsJan 27.2007 — #

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
 <html>
 
 <head>
 <title></title>
 
 <script language="JavaScript" type="text/javascript">
 <!--
 
 function CloneSelects(cloneid,tableid,inrow,incell){
 var clonesel=document.getElementById(cloneid).getElementsByTagName('SELECT')[0];
 var table=document.getElementById(tableid);
 var rows=table.rows;
 for (var zxc0=0;zxc0<rows.length;zxc0++){
 if (inrow.match(zxc0)){
 var cells=rows[zxc0].cells
 for (var zxc1=0;zxc1<cells.length;zxc1++){
 if (incell.match(zxc1)){
 var newsel=clonesel.cloneNode(true);
 newsel.name='Sel'+zxc0+zxc1;
 newsel.options[0].text=newsel.name;  // for demonstration only
 cells[zxc1].appendChild(newsel);
 }
 }
 }
 }
 }
 //-->
 </script>
 </head>
 
 <body onload="CloneSelects('CloneID','Tst1','1,3','0,2')">
 <table id="Tst1" cellpadding="0" cellspacing="0" border="1">
 <tr>
 <td>Whatever</td>
 <td>Whatever</td>
 <td>Whatever</td>
 <td>Whatever</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>Whatever</td>
 <td>&nbsp;</td>
 <td>Whatever</td>
 </tr>
 <tr>
 <td>Whatever</td>
 <td>Whatever</td>
 <td>Whatever</td>
 <td>Whatever</td>
 </tr>
 <tr>
 <td></td>
 <td>Whatever</td>
 <td></td>
 <td>Whatever</td>
 </tr>
 </table>
 
 <div id="CloneID" style="position:absolute;visibility:hidden;" >
 <select style="width:100px;">
 <option value="" >1</option>
 <option value="" >2</option>
 <option value="" >3</option>
 <option value="" >4</option>
 <option value="" >5</option>
 <option value="" >6</option>
 <option value="" >7</option>
 </select>
 </div>
 </body>
 
 </html>[/CODE]

@mousebearauthorJan 27.2007 — #I am sorry...I am lost:

It looks as if you are creating an option list inside a hidden div. and that your function will replicate that. I think I am seeing that you are creating SELECT objects with concatenated names starting with 'Sel' and array values. But as to how you intersperse text and the cloned selects within the table, I have no clue. Would you mind giving a little description of how this is working. Again, I have only a 1 dimensional array (column) of SELECTS, interspersed with one column of text. They are the first and second TD's, respectively, of around 30 rows (TR's) within a single table.

Thanks for the quick response though...

@mjdamatoJan 27.2007 — #Mousebear, if I am understanding you correctly, you are wanting to run your answer checking script for each of the 30 select lists. In that case it woud be helpful for you to post a link to your current page or to post the script and a handful of the select lists so we can get an idea of what we are working with.

In any case, I think the solution will be very simple. You should only need to modify your script so that the function takes two variables: the value of the selected option and the correct option.

Here is an example of the logic:

<i>
 </i>&lt;script&gt;
 function checkAnswer(fieldValue, correctAnswer) {
 if (fieldValue == correctAnswer) { alert("correct"); }
 else { alert("wrong"); }
 }
 &lt;/script&gt;
 
 What color is the sky?
 &lt;select onchange="checkAnswer(this.value,'blue');"&gt;
 &lt;option value="red"&gt;red&lt;/option&gt;
 &lt;option value="blue"&gt;blue&lt;/option&gt;
 &lt;/select&gt;
 How many pennies are in a dollar?
 &lt;select onchange="checkAnswer(this.value,'100');"&gt;
 &lt;option value="100"&gt;100&lt;/option&gt;
 &lt;option value="200"&gt;200&lt;/option&gt;
 &lt;/select&gt;

@mousebearauthorJan 27.2007 — #mjdamato: I am sorry I didn't explain it clearly. The checking part is a piece of cake (well, I did get some help from jimberry when I got stuck at the start), but I was pretty proud I developed it from there.

The hard part is not creating an html file that is 2 miles long to contain all the SELECT definitions and also a pain to change if I need to.

I need about half an hour to get things in shape to upload so you can see it. But yes, then I think it will be really easy to understand what I am trying to do.

@mousebearauthorJan 27.2007 — #Warning, we are extremely amateur website developers, the following website really only works in IE.

Here is the link to the page in progress.

http://clubs.ca4h.org/sanmateo/pacifica/projects/html/htmlTagWorksheet.html

I'd appreciate any help you can give.

@vwphillipsJan 27.2007 — #CloneSelects('CloneID','Tst1','1,3','0,2')"[/QUOTE]

parameter 0 = the clone libary ID.

parameter 1 = the table ID.

parameter 2 = the table rows to populate.

parameter 3 = the table columns to populate.

the the clone libary may hold as many templates as required, picking the one required and cloning saves much code and effort when coding.

You required select list names, you did not specify the naming convention. The naming convention I used was convenient and logical. Any naming convention may be applied with some math or arrays.

@mousebearauthorJan 27.2007 — #My impression is that this is going to be really difficult for future webmasters to decypher. I need to leave HTML code that they know how to modify. So, I repeated it all.

I was just wondering whether I could use INCLUDE to replicate the SELECT statements, except for the statement with the Name of course. I may give that a try.

Anyway, everything works nicely on my localhost, but I want to make a big change: I am going to switch from checking SelectIndex numbers to checking the Text that has been selected. I want to do this so I can eliminate Options from all the incorrectly-matched Select boxes. I would eliminate the Options that were correctly matched on the previous try, reducing the options to just the remaining incorrect matches. If I used my old code where I check against pre-defined SelectIndex numbers, it would cause errors because the SelectIndex numbers will be bouncing around.

If this works, maybe I'll start a new thread with all the lessons learned from this, and the Code.

Thanks so far...

@mjdamatoJan 27.2007 — #OK, here goes.

First off, I'm going to show a way to check the answers more efficiently as it will impact the script to autopopulate the select list.

1) Give each option a value such as 'html' for the html tags, 'italic' for the italic tags, etc.

2) Name each select list in this manner "answer_[b]html[/b]" Where "html" is the correct answer corresponding to the values in step 1

3) Replace your checking scripts with these:

function checkOneMatch(selOb)
 {
 answer = selOb.name.substr(7);
 selOb.className = (selOb.value==answer)?"dropTagsRight":"dropTagsWrong";
 if (selOb.className=="dropTagsWrong")  { selOb.selectedIndex = 0; }
 }
 
 function checkAllMatches(theForm)
 {
 for (i=0; i&lt;theForm.elements.length; i++) {
 if (theForm.elements[i].name.substr(0,6)=="answer") {
 checkOneMatch(theForm.elements[i]);
 }
 }
 return false;
 }

If you really want to use javascript to populate all the select lists you can do it. But, I don't recommend it because it could break your page for some visitors. There are much better ways to accomplish the same thing, such as using a server-side language like PHP, ASP, etc.

But assuming you don't have access to do that, here is how you could do this with javascript:

1) Fill out all the options for the first select list; then create all the other select lists, but do not create any options for them.

2) Create the function to populate the other select lists, let's call it "fillSelects()"

3) Call the function within the body tag using onload="fillSelects();"

Here is the function:

function fillSelects() {
 df = document.entry;
 for (i=0; i&lt;df.elements.length; i++) {
 fldName = df.elements[i].name;
 if (fldName.substr(0,6)=="answer" &amp;&amp; fldName!="answer_html") {
 for (j=0; j&lt;df.answer_html.options.length; j++) {
 txt = df.answer_html.options[j].text;
 val = df.answer_html.options[j].value;
 df.elements[i].options[j] = new Option(txt,val);
 }
 }
 }
 }

Now your page is completely self-sufficient. To add a new "question" you simply need to add the select field. You do not need to give it any options. You just need to give it a name in the format "answer_[i]answervalue[/i]" where answervalue is the same as the value of the correct option in the first select list. It will automatically get populated and get checked upon submission.

I have uploaded a replacement for your HTML page with the code changes above. You will need to rename it from txt to htm. Let me know if you have any questions.

[upl-file uuid=34e91e7c-7536-4183-a271-dfcedcc386ad size=7kB]htmlTagWorksheet.txt[/upl-file]

@mousebearauthorJan 28.2007 — #Thanks so much for the time you put in this:

1) I was not able to get on my computer that ran .ASP, but I plan to try to populate the forms with INCLUDE statements.

2) I added the value properties. Matching the names to the values was very slick.

3) I turned your statement: selOb.className = (selOb.value==answer)?"dropTagsRight":"dropTagsWrong"; into a more traditional if, then, else format and it seems to work just fine. (it just seems easier for future editors to comprehend, inlcuding me)

4) I started to add my 2nd to last feature (the last one should be easy, if I can get this one), which is to eliminate options from the incorrect SELECT objects. I did this by creating a one-dimensional array of strings, consisting of the names of the correctly answered SELECT names. Then I go back through all the SELECT objects, and if the object has a className=="dropTagsWrong" it tries to remove all its options that match any of the names in the array. This hasn't worked so well so far. I plan to pick it up in the morning. I may need a little help with this if I beat my head against the wall for more than a few hours.

5) The last thing I plan to add is a hidden link in a piece of text you can click on to reveal all the correct answers, so it becomes a reference sheet. The clue is revealed with a messagebox if you get all the matches right. That should be pretty easy I figure.

@mousebearauthorJan 28.2007 — #HELP!!!!!!!!

I got everything working the way I wanted. The code is on the bottom of this post. Considering how little I knew javascript going into this, I am pretty proud of it. However, intermittently when someone clicks on the "Check Your Work" button, instead of checking the answers like usual, all the SelectBoxes go back to their original className and the SelectedIndexes go back to 0. The form must be reloading, but I don't know what is triggering it. You can make it to the end with correct answers, and almost all the time you can make it to some intermediate percentage of correct answers, but occasionally this bug happens. It happens enough that my first volunteer had it happen to her twice in her attempt to get them all right, and she got frustrated and stopped taking the "test". The web page is:

http://clubs.ca4h.org/sanmateo/pacifica/projects/html/htmlTagWorksheet.html

Could it have anything to do with the fact that it is storing these guesses in the browser html address. The address looked like it was a mile long. Is there a limit to this?

Note, there is a way to cheat and get all the answers filled in. You click on the word CHEAT in the narrative above the form. It gives you this clue after you get all the answers right the first time. I wanted the sheet to be a useful reference, and it wouldn't be if you had to take the test to use it as a reference.

Also note, that the options in the SelectBoxes get eliminated as you get correct answers in the other boxes. I didn't want the kids to get frustrated, so as you get to the less obvious tags, the process of elimination gets easier.

Sorry if my tag descriptions are amateurish, or outright incorrect. I am going to solicit correction on the website if anyone wants to submit them. I didn't spend a lot of time doing the tag descriptions. I mostly wanted to make sure I had this form working...

[COLOR="Blue"]

&lt;script language="JavaScript" type="text/javascript"&gt;
 &lt;!--
 
 function checkOneMatch(selOb)
 {
 guess = selOb.name.substr(5);
 if (selOb.value==guess)
 {
 selOb.className = "dropTagsRight";
 }
 else
 {
 selOb.className = "dropTagsWrong";
 }
 }
 
 
 function clearMatchedOptions(selOb, removeArray)
 {
 for (var i=selOb.options.length-1; i&gt;=0; i--)
 {
 for (var j=0; j&lt;removeArray.length; j++) 
 {
 if (selOb.options[i].value==removeArray[j])
 {
 selOb.remove(i);
 selOb.selectedIndex = 0;
 }
 }
 }
 }
 
 
 
 function cheatFunction(theForm)
 {
 var guessObs = new Array();
 for (i=0; i&lt;theForm.elements.length; i++) 
 {
 if (theForm.elements[i].name.substr(0,5)=="guess")
 {
 guessObs.push(theForm.elements[i]);
 }
 }
 for (i=0; i&lt;guessObs.length; i++) 
 {
 for (var j=0; j&lt;guessObs[i].options.length; j++) 
 {
 if (guessObs[i].name.substr(5) == guessObs[i].options[j].value)
 {
 guessObs[i].selectedIndex = j;
 }
 }
 }
 checkAllMatches(theForm);
 return (false);
 }
 
 
 
 function checkAllMatches(theForm)
 {
 var guessObs = new Array();
 var goodGuesses = new Array();
 var badGuesses = new Array();
 for (i=0; i&lt;theForm.elements.length; i++) 
 {
 if (theForm.elements[i].name.substr(0,5)=="guess")
 {
 guessObs.push(theForm.elements[i]);
 }
 }
 for (i=0; i&lt;guessObs.length; i++)
 { 
 checkOneMatch(guessObs[i]);
 if (guessObs[i].className=="dropTagsRight")
 {
 goodGuesses.push(guessObs[i].value);
 }
 else
 {
 badGuesses.push(guessObs[i].value);
 } 
 }
 for (i=0; i&lt;guessObs.length; i++) 
 {
 if (guessObs[i].className=="dropTagsWrong")
 {
 clearMatchedOptions(guessObs[i], goodGuesses);
 }
 }
 if (badGuesses.length==0)
 {
 alert ("Nice work, you got them all!  Future Clue: Click on the word 'CHEAT' to see all the correct answers");
 }
 else
 {
 alert ("You only have " + badGuesses.length + " Tag remaining to correct.");
 }
 return (false);
 }
 
 
 //--&gt;&lt;/script&gt;

[/COLOR]

@mousebearauthorJan 28.2007 — #p.s. How did you folks get your code in those fancy little windows? For some reason my code is losing its indenting...

@mjdamatoJan 29.2007 — #When posting your code, put it within code tags like this:

[ code ][i]code goes here[/i][ /code ]

(except do not put spaces within the brackets.)

I'll take a look at what you have when I get a chance. I would make one recommendation, however. The HTML tags in the select list should be in alphabetical order. It is a pain trying to find the right one as it is now.

@PhroztJan 29.2007 — #Might I suggest a different form of attack?

It seems that you are always using the same options, so why don't you put them in a combo box that only allows one select?

Then, for each field, have a button in front of it. Make the button populate a label (div) in front of the definition with the option they selected.

What you are doing behind the scenes is not only populating the div, but also populating hidden fields (or you could just use the div and getElementById when you are ready to check).

In this way, you would only have to create one combo box, one function that every button could use to populate the fields (setAnswer(comboOption, field)... go from there), and still use your checking script, feeding in each of the hidden fields/divs

EDIT: Actually, you don't even need to send in the comboOption.. you can search for that yourself... This would be incredibly easy to set up. All you would need to set up is:

- Combo box cboOptions that has all available answers

- buttons to select an option with onClick="setAnswer(...)" where each ... corresponds to whatever divID needs to be set

- uniquely identified div fields in front of all tag function descriptions that would be populated

- the following code:

[CODE]function setAnswer(divID)
 {
 var answer = cboOptions.options[cboOptions.selectedIndex].value;
 document.getElementById(divID).InnerHTML = answer;
 }[/CODE]

@konithomimoJan 29.2007 — #Here is how I would do it:

&lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;
 var end = new Array('Html','Comment','Head','Title','Meta','Link','Body','IFrame','Div','Script','Form','Select','Option','Input','Table','Tr','Td','A','Img','Ol','Ul','Li','P','Br','B','I','H1','H2');
 function makeFormData(){
 var inc = 0;
 var sel, op;
 var opts = new Array();
 var trs = document.getElementById('maintable').getElementsByTagName('tr');
 opts[0]=new Array();
 opts[1]=new Array();
 opts[2]=new Array();
 opts[3]=new Array();
 opts[4]=new Array();
 opts[5]=new Array();
 opts[6]=new Array();
 opts[7]=new Array();
 opts[8]=new Array();
 opts[9]=new Array();
 opts[10]=new Array();
 opts[11]=new Array();
 opts[12]=new Array();
 opts[13]=new Array();
 opts[14]=new Array();
 opts[15]=new Array();
 opts[16]=new Array();
 opts[17]=new Array();
 opts[18]=new Array();
 opts[19]=new Array();
 opts[20]=new Array();
 opts[21]=new Array();
 opts[22]=new Array();
 opts[23]=new Array();
 opts[24]=new Array();
 opts[25]=new Array();
 opts[26]=new Array();
 opts[27]=new Array();
 opts[28]=new Array();
 opts[29]=new Array();
 
 opts[0][0] = "Blank";
 opts[0][1] = " ";
 opts[1][0] = "Link";
 opts[1][1] = "&amp;lt;link&amp;gt;...&amp;lt;/link&amp;gt;";
 opts[2][0] = "I";
 opts[2][1] = "&amp;lt;i&amp;gt;...&amp;lt;/i&amp;gt;";
 opts[3][0] = "Li";
 opts[3][1] = "&amp;lt;li&amp;gt;...&amp;lt;/li&amp;gt;";
 opts[4][0] = "Body";
 opts[4][1] = "&amp;lt;body&amp;gt;...&amp;lt;/body&amp;gt;";
 opts[5][0] = "Img";
 opts[5][1] = "&amp;lt;img&amp;gt;...&amp;lt;/img&amp;gt;";
 opts[6][0] = "Table";
 opts[6][1] = "&amp;lt;table&amp;gt;...&amp;lt;/table&amp;gt;";
 opts[7][0] = "Select";
 opts[7][1] = "&amp;lt;select&amp;gt;...&amp;lt;/select&amp;gt;";
 opts[8][0] = "Br";
 opts[8][1] = "&amp;lt;br&amp;gt;...&amp;lt;/br&amp;gt;";
 opts[9][0] = "H2";
 opts[9][1] = "&amp;lt;h2&amp;gt;...&amp;lt;/h2&amp;gt;";
 opts[10][0] = "Html";
 opts[10][1] = "&amp;lt;html&amp;gt;...&amp;lt;/html&amp;gt;";
 opts[11][0] = "IFrame";
 opts[11][1] = "&amp;lt;iframe&amp;gt;...&amp;lt;/iframe&amp;gt;";
 opts[12][0] = "Tr";
 opts[12][1] = "&amp;lt;tr&amp;gt;...&amp;lt;/tr&amp;gt;";
 opts[13][0] = "P";
 opts[13][1] = "&amp;lt;p&amp;gt;...&amp;lt;/p&amp;gt;";
 opts[14][0] = "Title";
 opts[14][1] = "&amp;lt;title&amp;gt;...&amp;lt;/title&amp;gt;";
 opts[15][0] = "Input";
 opts[15][1] = "&amp;lt;input&amp;gt;...&amp;lt;/input&amp;gt;";
 opts[16][0] = "B";
 opts[16][1] = "&amp;lt;b&amp;gt;...&amp;lt;/b&amp;gt;";
 opts[17][0] = "Comment";
 opts[17][1] = "&amp;lt;&amp;#33;--...--&amp;gt;";
 opts[18][0] = "H1";
 opts[18][1] = "&amp;lt;h1&amp;gt;...&amp;lt;/h1&amp;gt;";
 opts[19][0] = "Ol";
 opts[19][1] = "&amp;lt;ol&amp;gt;...&amp;lt;/ol&amp;gt;";
 opts[20][0] = "Meta";
 opts[20][1] = "&amp;lt;meta&amp;gt;...&amp;lt;/meta&amp;gt;";
 opts[21][0] = "Td";
 opts[21][1] = "&amp;lt;td&amp;gt;...&amp;lt;/td&amp;gt;";
 opts[22][0] = "Option";
 opts[22][1] = "&amp;lt;option&amp;gt;...&amp;lt;/option";
 opts[23][0] = "Ul";
 opts[23][1] = "&amp;lt;ul&amp;gt;...&amp;lt;/ul&amp;gt;";
 opts[24][0] = "Head";
 opts[24][1] = "&amp;lt;head&amp;gt;...&amp;lt;/head&amp;gt;";
 opts[25][0] = "Div";
 opts[25][1] = "&amp;lt;div&amp;gt;...&amp;lt;/div&amp;gt;";
 opts[26][0] = "A";
 opts[26][1] = "&amp;lt;a&amp;gt;...&amp;lt;/a&amp;gt;";
 opts[27][0] = "Form";
 opts[27][1] = "&amp;lt;form&amp;gt;...&amp;lt;/form&amp;gt;";
 opts[28][0] = "Script";
 opts[28][1] = "&amp;lt;script&amp;gt;...&amp;lt;/script&amp;gt;";
 
 
 for(var i=0; i&lt;29; i++)
 {
 sel = document.createElement('select');
 sel.id="sel"+i;
 tds = trs[i].getElementsByTagName('td');
 tds[0].appendChild(sel);
 
 for(j=0;j&lt;29;j++)
 {
 op = document.createElement('option');
 op.value = opts[j][0];
 op.text = opts[j][1];
 s = document.getElementById('sel'+i);
 s.options[s.options.length] = op;
 }
 }
 
 return true;
 }
 
 
 function checkIt(){
 var f = document.getElementById('myform');
 var sels = f.getElementsByTagName('select');
 var correct = 0;
 for(var k=0;k&lt;sels.length;k++)
 {
 if(sels[k].value == 'Blank')
 {
 alert('You did not answer question #'+(k+1));
 return false;
 }
 else if(sels[k].value == end[k])
 correct++;
 }
 alert('You got ' +correct+ ' correct out of 28.');
 return true;
 }
 
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="makeFormData()"&gt;
 &lt;form id="myform"&gt;
 &lt;table class=awardsTable id="maintable" border="2"&gt;
 &lt;col width=165px&gt;&lt;col width=70%&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;i&gt;Tag:&lt;/td&gt;&lt;td&gt;&lt;i&gt;Functional Description:&lt;/td&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     All of the HTML content within the HTML file.  Text outside of this tag area is not interpreted as HTML. 
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     A Comment.  These are notes in your HTML file that make your code easier for you and others to read.  Comments are not interpreted as HTML, and therefore do not show up on the page, nor perform any function.
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     The Header is the beginning of the HTML content.  This section contains the TITLE, LINK, and META elements in our 4H web pages.
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     The Title is the text that appears in your browser's title bar, in the very top left corner of the window. 
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     Meta data are words and descriptions intended to be found by search engines.  For example our main page has the following meta keywords: "Pacifica 4H, Pacifica 4-H, 4H, 4-H, Kids, Animals, Raising".  Our meta description is "Pacifica 4H website home page.  Here you see and learn about our club.  Hope you can join us...".
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     Links to code outside the document.  For example, our global CSS file is p4h.css, and our global javascript file is p4h.js.  Linking to one location means we only have to make a change in one document to effect the global formatting or functioning of all our documents.  &lt;a class="p4h2"&gt;This sentence is formatted with our "p4h2" style, defined in p4h.css only, but used throughout our website.
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     The Body of the document.  What actually appears on screen. 
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     An In-Line Frame.  This is a rectangular region of content that can be placed anywhere on the page.  Objects and text can flow or be located at specific locations within this region, as opposed to being relative to the full page boundaries.
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     Divisions within the web page.  These divisions can be formatted in the page or through your .CSS (Cascading Style Sheet) file.  It is a very powerful tool to format your pages. 
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     JavaScript code.  This is a programming language designed to work within, and on, web pages.
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     A Form in which users can enter data into the page, or select from lists of options.
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     A box in which users select from a list of options, like the one you are about to click on.
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     One of the options in a list of choices in a SELECT box, like the correct selection you are about to make.
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     Push these input buttons, &lt;input type="radio" name="demoRadio" value="Yes"&gt; to make things happen or select between options &lt;input type="radio" name="demoRadio" value="No"&gt;. 
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     A rectangular table with rows and columns.
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     A table row. 
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     Table data.  The content (images, text, etc.) that goes in a table cell.
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     An anchor, otherwise known as a hypertext link.  These can contain images or text that you click on to get sent to another location.  Don't &lt;a href="htmlHome.html"&gt;click on this one&lt;/a&gt;, or you will have to start your excercise over.
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     An image, such as &lt;img src="../../p4hPushpins/p4h12.png"&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     &lt;ol&gt;&lt;li&gt;An&lt;/li&gt;&lt;li&gt;ordered (numbered)&lt;/li&gt;&lt;li&gt;list&lt;/li&gt;&lt;/ol&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     &lt;ul&gt;&lt;li&gt;An&lt;/li&gt;&lt;li&gt;unordered (bulleted)&lt;/li&gt;&lt;li&gt;list&lt;/li&gt;&lt;/ol&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     A list item, such as "unordered" in the functional description above.
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     A new paragraph.
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     A line break.
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     &lt;B&gt;Bolded text&lt;/b&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     &lt;i&gt;Italicized text&lt;/i&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     &lt;H1&gt;The largest standard Heading style.&lt;/H1&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;/td&gt;
 &lt;td&gt;     &lt;H2&gt;The 2nd largest standard Heading style.&lt;/H2&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;input type="button" onclick="checkIt()" value="Submit"&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Of course you would probably want to incorporate your style into it.

@mousebearauthorJan 29.2007 — #I am going to have to review these last 2 suggestions later tonight. Do either of these actually solve the random form clearing problem? If so, I would still like to know why it is happening.

I just wanted to get back to mjdamato that I completely agree with putting the tag options in alphabetical order.

@PhroztJan 29.2007 — #I was thinking further about my suggestion, you could even do something cool like have the CSS change the background of an option after it was used... that way it would be a lot more like one of those worksheets you used to get w/a list of all the answers that you would cross off as you used them.

@mousebearauthorJan 29.2007 — #Phrost, Great idea. If I understand it right, this is exactly what this does. Did you try it out on the website? I change the className to call two different CSS classes for the drop-down boxes. When you answer it correctly it turns green. When you answer it incorrectly it turns red. Maybe I didn't understand your suggestion quite right, but I do like this feature. This happens only when you press the "Check Your Work" button. I didn't want it to tell you how you did with "onChange" or something, just so it seems more like a test. You are challenged to see how many you can get right. Otherwise, you are just working your way down the sheet changing guesses until you get each one right. I don't know that that is necessarily better, it was just my first idea of how to do it.

@mousebearauthorJan 30.2007 — #Both of these last 2 are really thoughtful solutions. Thanks for taking the time to try to help. ?

As for the comboBox idea, could it stay fixed on the screen? Otherwise, some tag descriptions are not going to be seen on the screen at the same time as the combobox. It also requires a button pushing step that introduces potential mistakes if they forget to change it from the last one. I guess a label could change just to the side of it to minimize that possibility, but the whole button-pushing thing seems like an unnecessary extra step.

As for the fancy arrays, I like that, but I think I am going to try to use .ASP Includes as a first attempt. It may not be as elegant, but I think it is easier for someone else to understand that the Include just acts like a variable that is replaced by the included file.

Any ideas on the intermittent clearing of the form problem? It seems to happen around once every 5th time or so that you click on the "Check Your Work" Button. I am pretty sure it started to happen when I introduced the clearMatchedOptions function.

@mousebearauthorFeb 04.2007 — #I am going to call this done. I went with .asp INCLUDE statements to populate the Select Boxes:

[CODE]<tr><td><select class="DropTagsRight" size="1" name="guessI">
 <!--#include FILE="htmlTagWorksheetOptions.asp"-->
 </select></td>
 <td>     Italicized text.</td></tr>[/CODE]

The file "htmlTagWorksheetOptions.asp" is just a list of around 30 OPTION statements.

I noticed that my problem with the clearing of the FORM occurred whenever I chose the option <UL>, but only if there was another correct match first. This option happened to be the last one in the SELECT statement. The clearing happened when it tried to REMOVE this option from the other SELECT boxes. Eventually I bailed on trying to figure out how to really debug it, and just added a blank Option statement at the end of each SELECT box. Everything works as I intended now.

Also in #JavaScript _↴

Forcing reload of linked javascript pages The DEFER Attribute onHover = function "make div visible and larger"

Success!

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

Tweet This

[RESOLVED] Multiple Select Drop-downs with Same Options

19 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Multiple Select Drop-downs with Same Options

19 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

19 Comments(s) _↴

Also in #JavaScript _↴