Simple way of making an MS excel-esque 'if text box = ? then...." type function?

Hi all,

Firstly I'm competent in HTML and CSS, but other than copy/paste type implementation am an absolute novice at everything else, so if achieving this is going to be way outside my capability please just let me know!

I am hoping to put together an online quiz, with each question consisting of some form of media (image/audio/video/etc.) beneath which there will two questions and two text boxes in which to type an answer. For example a picture of Van Gogh's Sunflowers beneath which it will say 'Name this artist...' beneath that a text box, then beneath that 'Name this painting...' and beneath that another text box. Beside each of the answer text boxes a second box where a score will be generated if the answer entered matches a stored answer.

What I would then to do is have some script that says: If text box 1A equals 'Vincent Van Gogh' or 'Van Gogh' then box 1B equals '1' so it shows a point if they enter the correct answer, but nothing happens for a wrong answer. Then a total box that acts as a running total (like the autosum function in excel) so box content =1B+2B+3B etc. etc. where a blank box counts zero and boxes with 1 in get added up as a running total score.

I am hoping that if each box is given a unique ID this should be fairly simple... crosses fingers!

(The usage will be just for fun and in single sessions so no need for log ins, maintaining score for new sessions, or worrying about people viewing answers by viewing source)

Yes, and simpler still if this is all on one page. I'm also thinking that if you made an HTML form, and put all of the text boxes in that, that might be best. I can make up a simple demo (IE 9 or later, FF 1.5 or later - all modern browsers):

Code:

<!DOCTYPE html> <html> <head> <title>Art Quiz</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> input[disabled] { width: 1ex; } input[name="total"] { width: 1em; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> jQuery(function($){ var caseinsensitive = false; $('input[data-answer]').each(function(n, i){ var cn = 0, $i = $(i), an = $i.data('answer').split(','); $.each(an, function(i, a){ cn = Math.max(cn, a.length); }); $i.attr('length', cn); }).on('change keyup mouseleave', function(){ var $i = $(this), an = $i.data('answer').split(','), t = 0; if(!caseinsensitive && an.indexOf($i.val()) > -1){ $i.next().val(1); } else if(caseinsensitive){ $i.next().val(0); $.each(an, function(i, a){ if(a.toLowerCase() === $i.val().toLowerCase()){$i.next().val(1);} }); } else if(!caseinsensitive){ $i.next().val(0); } $('input[disabled]').not('[name="total"]').each(function(){ t += +this.value; }); $('input[name="total"]').val(t); }); $('form[name="quiz"]').submit(function(e){ e.preventDefault(); }); }); </script> </head> <body> <form name="quiz"> Name this artist: <input type="text" data-answer="Vincent Van Gogh,Van Gogh"> <input disabled type="text"><br> Name this painting: <input type="text" data-answer="Sunflowers"> <input disabled type="text"><br> total: <input disabled type="text" name="total"> </form> </body> </html>

You don't have to worry about id's as long as you follow the format, which is one question followed by it's points box which must be disabled and just one disabled total box at the end there. You can have as many question/point box pairs as will fit in the space you want, which is virtually unlimited, it can be a really long page if you want. Some tweaking is possible. Notice that each answer is in the data-answer attribute for the question's box. If multiple forms of the answer are acceptable, separate with a comma as I have done for:

Code:

Name this artist: <input type="text" data-answer="Vincent Van Gogh,Van Gogh">

If you want it to be case intensive, that can be done by setting the caseinsensitive variable (near the beginning of the javascript code) to true.

Awesome, this is perfect and far simpler than I was anticipating - Thank-you

A slightly more robust and versatile version:

Code:

<!DOCTYPE html> <html> <head> <title>Art Quiz</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> input[disabled] { width: 1ex; } input[name="total"] { width: 1.25em; text-align: right; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> jQuery(function($){ var caseinsensitive = false, /* set to true to make answers case insensitive, false for case sensitive (unquoted) */ delimiter = ',' /* set separator character(s) for multiple answers in data-answer attributed (quoted) */ $f = $('form[name="quiz"]').submit(function(e){ e.preventDefault(); }), funcstring = caseinsensitive? 'toLowerCase' : 'valueOf', $inputs = $('input', $f); $('input[data-answer]', $f).each(function(n, i){ var cn = 0, $i = $(i), an = $i.data('answer').split(delimiter); $.each(an, function(i, a){ cn = Math.max(cn, a.length); }); $i.attr('length', cn).data({$nextinput: $inputs.eq($inputs.index($i) + 1)}); }).on('change keyup mouseleave', function(){ var $i = $(this), an = $i.data('answer').split(delimiter), t = 0, $next = $i.data('$nextinput').val(0); $.each(an, function(i, a){ if($.trim(a[funcstring]()) === $.trim($i.val()[funcstring]())){$next.val(1);} }); $('input[disabled]', $f).not('[name="total"]').each(function(n, i){ t += +i.value; }); $('input[name="total"]', $f).val(t); }); }); </script> </head> <body> <form name="quiz"> Name this artist: <input type="text" data-answer="Vincent Van Gogh,Van Gogh"> <span>Pts: </span> <input disabled type="text"><br> Name this painting: <input type="text" data-answer="Sunflowers"> <input disabled type="text"><br> total: <input disabled type="text" name="total"> </form> </body> </html>

Should now work with earlier browsers than before (old IE 8 and less and FF before 1.5). Trims white space from the beginning and end of user supplied answers and defined answers. Defines elements more strictly allowing for other forms and/or similar inputs on the page outside of the 'quiz' form, and allows for a greater distribution of other elements in the quiz form if needed. Allows you to choose the separator used for multiple answers (can be more than one character, like two commas perhaps if single comma is used in an answer). I added case insensitive as an option before, but I think that was after you saw the code. It's included here as well.

NOTE: See edit timestamp below this for latest update time.

Hi John,

Given it has been over a year I doubt you'll even remember what a great help you were writing this code for me, it has been perfect for what I needed for a long time but am now looking to hopefully make a few upgrades and was wondering if the following change is possible and easy to implement...

How easy is it to adapt the code to include sub-totals prior to the actual total? Ideally I would like ten subjects each with ten rounds of twenty questions, so as per the original code you get a score by each question when you get the question right which adds to the total at the bottom, but also now adds to a round total at the end of each section.

So when you answer a question you get a point.

After twenty questions you get a round score out of 20

After ten rounds you get a subject score out of 200

After ten subjects you get a grand total out of 2000.

I'm assuming the simplest way would be to use the same code you gave me before adding a new form with unique name for each round? But then is it possible to add up these totals for a subject total, then those totals for a grand total? Or am I on completely the wrong track?

Many thanks once again if you have time to help :)

I'm thinking about this. It seems to me it doesn't matter if it's all one form or many different forms. The difference would be that with many forms, it would be easier to have more than one page. Once you do that however, you need to store any running totals. A cookie or cookies could do that, but then you probably should ask permission of the user to use cookies and advise them that they need to be turned on. An alternative would be to use PHP - but that only works if it's available on your server.

Another consideration - since the code evaluates the answer every time the user changes the answer or even just passes their mouse over the answer block, there's no meaningful way I can think of to count answering events, so showing a total after 20, 200, 2000, would be a slight problem. I've done quizzes before and dealt with that by having a button available to the user to get a total or totals. Or you could just have running totals for all three categories (20, 200, 2000).

And I really don't want to have to make up a bunch of questions to test this. Do you have some questions made up? Could you email them to me if I PM you my email address? Please format them as in the original quiz.

Finally, this could be a bit of a project. So I'm not sure how long it will take. Just thinking about it may actually be faster than trying to dive right in. By that I mean trying out ideas in my mind for a while and perhaps checking back with you on them, until something workable occurs to me may actually be the best initial approach to this.