Collect answer and test it-CodePudding

I am trying to do a scavenger hunt with my students. Basically they do something, input an answer, if it is correct then the page should give them the URL to jump to the next clue. If it is wrong, they get a "Sorry, wrong" message and can keep inputting until they get it. I have read several sites and tried different things. I had the input worked out, but could not figure out how to display a hotlink for them to click on in JS. I have a free site setup and want to insert this Javascript but of course it is not working!

function myFunction() {
  var letter = document.getElementById("personsInput").value;
  var text;
  let linkName = "Next challenge.";
  // If the word is correct “chocolate"
  if (letter === "chocolate") {
    text = "<a ref ='https:// this is where the URL goes'>  linkName   " < /a>";
    // If the word is anything else
  } else {
    text = "Sorry, wrong answer";
  }
  document.getElementById("demo").innerHTML = text;
}

<input id="personsInput" type="text">
<button onclick="myFunction()">What is your answer?</button>
<p id="demo"></p>

CodePudding user response：

You are missing the closing quotation around "<a ...> linkname
Your anchor tag needs href, not ref. I fixed these two issues and it works as intended.

<input id="personsInput" type="text">
<button onclick="myFunction()">What is your answer?</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var letter = document.getElementById("personsInput").value;
        var text;
        let linkName = "Next challenge.";
        // If the word is correct “chocolate"
        if (letter === "chocolate") {
            text = "<a href ='https:// this is where the URL goes'>"  linkName   "</a>";
        // If the word is anything else
        } else {
            text = "Sorry, wrong answer";
        }
        document.getElementById("demo").innerHTML = text;
     }
 </script>

CodePudding user response：

You Got it! You are just missing a closing " after where the URL goes.

A warning your students will be able to inspect the site source and see the correct answers.

text = "<a ref ='https:// this is where the URL goes'>"   linkName   "
 </a>";

function myFunction() {
  var letter = document.getElementById("personsInput").value;
  var text;
  let linkName = "Next challenge.";
  // If the word is correct “chocolate"
  if (letter === "chocolate") {
    text = "<a ref ='https:// this is where the URL goes'>"   linkName   " </a>";
    // If the word is anything else
  } else {
    text = "Sorry, wrong answer";
  }
  document.getElementById("demo").innerHTML = text;
}

<input id="personsInput" type="text">
<button onclick="myFunction()">What is your answer?</button>
<p id="demo"></p>

CodePudding user response：

Here is another way to do it Using document.createElement

<script>
function myFunction() {
  const answer = document.getElementById("personsInput").value;
  const resultArea = document.getElementById("demo")
  const linkName = "Next challenge.";
  const wrongAnswer = "Sorry, wrong answer.";
  resultArea.innerHTML = '';

  if (answer === "chocolate") {
    const link = document.createElement('a');
    link.href = 'http://google.com';
    link.text = linkName;
    link.target = '_blank';
    resultArea.appendChild(link);
   } else {
    text = "Sorry, wrong answer";
    resultArea.innerHTML = wrongAnswer;
   }
  }
</script>
<input id="personsInput" type="text">
<button onclick="myFunction()">What is your answer?</button>
<p id="demo">
</p>

As noted in the other answers maybe this is not the best way to exam your students, as they can view the source and get the correct answers from there.