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>

Answer 1

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>