use javascript to create test checker

Question

I am a maths teacher. I want to use my school's website to allow pupils to check whether they have the correct solutions to a set of test questions given separately on paper. I wanted to give pupils a textbox in which they can enter their solution and a button to press to check if it is correct. A correct answer will display a 'correct' icon next to the question etc. I am a complete beginner but I have so far managed:

<script>
function check(z)
{
var ans = new Array
ans[0]="522"
ans[1]="144"

if (document.getElementById('response'+z).value==ans[z])
{
document.getElementById('correct' + z).style.visibility='visible'
document.getElementById('incorrect' + z).style.visibility='hidden'
}
if (document.getElementById('response'+z).value!=ans[z] && document.getElementById('response'+z).value!='')
{
document.getElementById('correct' + z).style.visibility='hidden'
document.getElementById('incorrect' + z).style.visibility='visible'
}
if (document.getElementById('response'+z).value=='')
{
document.getElementById('correct' + z).style.visibility='hidden'
document.getElementById('incorrect' + z).style.visibility='hidden'
}
}
</script>

<img id="correct0"src="correct.jpg"style="visibility:hidden"/>
<img id="incorrect0"src="incorrect.jpg"style="visibility:hidden"/>
1a  
<textarea style="width: 100px; height: 20px;"id="response0"></textarea>
<button style="height: 20px"onclick="check(0)">check</button>
<br></br>

<img id="correct1"src="correct.jpg"style="visibility:hidden"/>
<img id="incorrect1"src="incorrect.jpg"style="visibility:hidden"/>
1b  
<textarea style="width: 100px; height: 20px;"id="response1"></textarea>
<button style="height: 20px"onclick="check(1)">check</button>
<br></br>

This works but is obviously very clunky (I have in fact used an Excel spreadsheet to generate the html code). My questions are: Can I use javascript itself to generate the textboxes and buttons? Can I obfuscate the correct answers (if a pupils knows how to view the source of my webpage, it's game over for my exam!).

Many thanks and best wishes,

svidgen · Accepted Answer · 2013-03-25 22:12:09Z

3

Ideally, you'll generate and verify the solutions server-side. If that's not an option, drop a reference to a hashing library in your page and validate answers against cryptographic hashes:

https://code.google.com/p/crypto-js/

You'll have to generate the hashes in your spreadsheet -- or in your own question-generation page using the same hashing library.

But beware! If there is a potential that your students are at all familiar with JavaScript, they could still easily open a JavaScript console and brute force it. Assuming reasonable answers tend to be numeric and below 1 million, it's pretty trivial ...

... One more caveat. If your answers are open text fields, you'll need to "normalize" the input before checking it. Remove extra spaces, punctuation, etc.

answered Mar 25, 2013 at 22:12

svidgen

14.4k4 gold badges37 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ComFreek Over a year ago

+1 hiding the logic on the server-side is the only 'real' solution.

Olaf Horstmann Over a year ago

+1 for the hashing, I like that idea, too bad brute force would be easy in this case with just numeric solutions (but I don't think his student's will be that clever) :D

Geddes Over a year ago

I'm certainly not that clever! Thanks for you comments!

Olaf Horstmann · Accepted Answer · 2013-03-25 22:09:28Z

2

Obfuscating in JavaScript is not really possible - there ARE obfuscators, but there are at the same time de-obfuscators (depending on your student's knowledge, this might be an alternative)

Edit: Here is an example of an obfuscator: http://www.daftlogic.com/projects-online-javascript-obfuscator.htm, and you can also take a look at Google closure: http://closure-compiler.appspot.com/home for minifying and "kind-of-obfuscation" But as I sad, pretty much anything can be reverted.

As far as generating the input-field and boxes ect, you should take a look at jQuery: http://jquery.com/ - it might be a little confusing in the beginning, but it is pretty easy and a BIG help with tasks like this.

If you get a little bit deeper into the topic you might want to consider server-side verification of the answers(so yout stundents can't read your code). It's not as hard as you might think, but for now jQuery should do the job.

I like your project though, I wish I had teachers like this back in the day :)

edited Mar 25, 2013 at 22:09

answered Mar 25, 2013 at 22:04

Olaf Horstmann

16.9k6 gold badges61 silver badges65 bronze badges

3 Comments

Geddes Over a year ago

Thanks so much! For a start the daftlogic obfuscator is exactly what I was after. I will look into the jquery stuff when I'm feeling brave! Thanks again!

Olaf Horstmann Over a year ago

But be aware the JS-code can be de-obfuscated with simple tools like this: jsbeautifier.org ;)

Geddes Over a year ago

Thanks for that - I just tried jsbeautifier and the answers are still pretty mixed up, plus I would be surprised if the students have knowledge of such tools. Well worth knowing that the de-obfuscation is possible though!

Collectives™ on Stack Overflow

use javascript to create test checker

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related