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.