jQuery short answers quiz

I’m developing a website containing my deutsch course lessons. Our teacher given us some exercises, and I had the need to render it on an interactive web page. How to accomplish this mission? Obviously using jQuery.
The main issue is to write in a simple way your “short answers” form, and leave the hard job to jQuery code. So the form need to looks like:

<form>
    The sky is <input type="text" answ="blue"/>.
    The pen is <input type="text" answ="on"/> the table.<br />
    Yes I, <input type="text" answ="am"/>.<br />
    <input type="button" class="subm" value="Verify"/>
</form>

As you can see, each <input> contains the attribute answ with the correct answer and the element you want to use to check needs to have class=”subm”. That’s all!

The JS code resizes all the text inputs using the answer’s length, and changes CSS class (answ_error, answ_ok) of the input element. Finally a couple of attributes (tot and ok) will be added to the form, containing the number of text inputs and the number correct answers.

Code is available here.

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...