Order numbers as on image with JavaScript

[bokanegro]

Hi,

I don't know if this is possible, but I need to try:



There is one image with numbers on it, to be precise sequence of numbers. I have two lists also (number lists), one with answers ( empty at this moment) and the other one with offered numbers, like this

Offered list:

<ul id="offer">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>

Answer list:

<ul id="answer">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

I need some instructions how can I onClick in list offer, copy clicked item into other list answer, but it must have same order as on image. If wrong number clicked, add class error.

For example: On image first number is 3, if user click on number 3 in list offer, number will be copied in list answer on first place. If user click on any other number, on clicked number will be added error class.

And everything again, in circle , until user order all numbers as on image. The data for the list will come from the database, but must be validated with JavaScript without reloading the page.

Do I need to use hidden values, or something like that? I am grateful for any help.

Thanks for your time

[djr33]

You'll probably want to use an image map with onclick actions on each <area> tag that are something like this:
onclick="setnextnumber(7);"

[bokanegro]

Hi djr33,

Thanks for your reply,

I don't want to user click on image. This is something like captcha, user would have to sort the numbers as they are arranged on image, and for that action he can use two lists.

[djr33]

Sorry I didn't understand that. So you want the user to click on the offered list so that the answer list gets populated?
Why not just use a real captcha? This won't be that much harder to get around and it's a lot more work to code.
Basically you can make the numbers in the first list links, and when you click on them instead of loading a page a javascript onclick event adds the number to the next list. Is the hard part adding the number to the next list? Is that where you are now?

[bokanegro]

Hi djr33,

So you want the user to click on the offered list so that the answer list gets populated?

Yes

Why not just use a real captcha?

It's not captcha, I'm trying to build some kind of test, driving test. Basically image is crossroad situation with cars and numbers. It's needed real time validation, onClick, user will know result right away, while clicking on correct or wrong number in lists.

Is the hard part adding the number to the next list? Is that where you are now?

Yes. I'm stuck in here. I'll somehow manage validation, if you could help me with copy items for one to another list?

Thanks for your time...

[djr33]

You can use the following onclick action to call a function and use the current 'value' (contents) of the <li>:

<li onclick="addnext(this.innerHtml);">1</li>

Then in your head section, you'll add the following Javascript:

function addnext(contents) {
   var li = document.createElement('li');
   li.innerHtml = contents;
   document.getElementById('answer').appendChild(li);
}

I haven't tested this, but it should be a good place to start. I think it should work.


This will copy the <li> item that you click into the "answer" list. Note that it does not do any error correction such as checking how many items you have already added (so you could add 7 items or more, for example).