How to create a simple HTML/Javascript quiz answer checker?

Question

I am working on an online problem-solving challenge. I need a simple web page that when given the correct answer gives a link but when given the wrong answer tells to try again or gives a hint.

I'm not much of a programmer. I have managed to get a simple page to do just this. The problem is that you can cheat the answer and the link by using Inspect Element. How do I make it so the page checks with the server first or something so players can't cheat?

Here's what I've got going. So what must I do so the answer or the link message can't be checked using Inspect Element or anything?

<form>
    <label for="answer">Your answer (in English): </label>
    <input type="text" id="answer">
    <input type="button" value="Submit" onclick="checkAnswer();">
</form>

<script type="text/javascript">

    var counter1 = 0;
    var counter2 = 0;

    function checkAnswer() {
        var confirmAnswer = "day and night";
        var answer = document.getElementById("answer").value;
        if (answer == confirmAnswer) {
             alert("Nice! There's one more game left. *PLACE LINK HERE*");
             counter2++;
        }
        else{
            alert("That's not quite it.");
            counter1++;
        }

        if (counter1>6 && counter2==0) {
            alert("Hint: This riddle is a favourite of someone with the head of a human and the body of a lion.");
        }
    }
</script>

If you're doing everything client side then you can't, it's just not possible. You can obfuscate your JavaScript to make it harder to understand, but if you really need to hide something then you'd have to do it on the server side where the user can't get to. — j08691, Jul 23 '19 at 18:37
@j08691 So I understood. What would be the simplest way to do this? What should I Google to find a template to copy-and-paste or to find something to learn of? — Toiwing, Jul 23 '19 at 18:39
Some cipher algo using key based on answers could help, but there is also option to try all possibilities, that maybe way easier than decrypting your link. Also some obfuscator example question here https://stackoverflow.com/questions/194397/how-can-i-obfuscate-protect-javascript — Jan, Jul 23 '19 at 18:40

apoteet · Answer 1 · 2019-07-23T18:59:07.967

As mentioned above, putting all your data on the front end is the least secure. But, if your users aren't willing to go to great lengths to cheat, you can obfuscate your code, and use hashing.

You can obfuscate your js by minifying it. The simplest way to do so is to go to https://skalman.github.io/UglifyJS-online/, plop the code in there and copy the output. The downside here is that, if you don't have a build process that does this automatically, it is difficult to update your website, since you'll have to do this each time you make a change to the code. It's also not as effective as hashing.

To hash your code, install a sha1 javascript library, like https://github.com/emn178/js-sha1. Then, go to https://passwordsgenerator.net/sha1-hash-generator/ to get the hashes of all your quiz answers. Hash the answers, and hardcode them in. To compare, use the javascript library to hash the user's input and compare with your hashed answer.

Your code would look something like this (untested):

<script src="https://raw.githubusercontent.com/emn178/js-sha1/master/build/sha1.min.js">
<script type="text/javascript">

    var counter1 = 0;
    var counter2 = 0;
    var hash = sha1.create();

    function checkAnswer() {
        var confirmAnswer = "E8EFA331DCE00DF668902AB894DB0127048C2765";
        var answer = document.getElementById("answer").value;

        hash.update(answer);

        if (hash.hex() == confirmAnswer) {
             alert("Nice! There's one more game left. *PLACE LINK HERE*");
             counter2++;
        }
        else{
            alert("That's not quite it.");
            counter1++;
        }

        if (counter1>6 && counter2==0) {
            alert("Hint: This riddle is a favourite of someone with the head of a human and the body of a lion.");
        }
    }
</script>

How to create a simple HTML/Javascript quiz answer checker?

1 Answers1