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.

Advertisements

Rispondi

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...