Checking an input against a specific array string

Question

I am trying to create a quiz that randomly selects a question from pool of questions in an array, which is answered in an input box that is to be checked against the corresponding answer string in the array. I used math.floor(math.random() *); to get my random number. The random number is intended to be used to find both the question and answer, which are arranged in order to correspond to one another, eg ['question1','question2'] and ['answer1','answer2'].

I am having difficulty with trying to get my input to properly be checked against the corresponding answer value from the array. I am fairly novice at Javascript, so I am not sure as to how to do this. I tried using the document.getElementById command to compare the two. I suspect it has something to do with the fact that ansNum doesn't get the value of questNum because of the fact that questNum is only given its value inside the generateQuiz function. (I realize ansNum is likely redundant, but I was just playing around to see if anything would happen)

Javascript:

const questions = ['What do young Roman males wear?','Who is the Roman god of the smith?','Who is the 6th king of Rome?'];

const answers = ['toga praetexta','vulcan','servius tullius'];

function getQuestNum() {
 questNum = Math.floor(Math.random() * 3);
};

function getAnsNum() {
ansNum = questNum();
}

function generateQuiz() {
getQuestNum();
document.getElementById("question").innerHTML = questions[questNum];
};

function checkCorrect() {
getAnsNum();
if (answer[ansNum] = document.getElementById("input").innerHTML) {
        document.getElementById("verification").innerHTML = "Correct!";
        }
};

Codepen Link

An image of the code

Answer 1

It would be simpler to create an array of objects that each contain both a question and an answer - and create a function that generates your random number and returns the object at the corresponding index.

Then you'll have access to everything you need without worrying about whether or not you can maintain access to the original randomly selected number, or matching up indices between two different arrays.

Answer 2

Based on your code, I fixed it with some changes. It is not the best way to do this i think. I posted the js part here.

const questions = ['What do young Roman males wear?','Who is the Roman god of the smith?','Who is the 6th king of Rome?'];

const answers = ['toga praetexta','vulcan','servius tullius'];
var questNum;
function getQuestNum() {
    questNum = Math.floor(Math.random() * 3);
};

function getAnsNum() {
    ansNum = questNum;
}

function generateQuiz() {
    getQuestNum();
    document.getElementById("question").innerHTML = questions[questNum];
};

function checkCorrect() {
    getAnsNum();
    if (answers[ansNum] = document.getElementById("input").value) {
        document.getElementById("verification").innerHTML = "Correct!";
    }
};

• First you need a global variable questNum then you can use it in all of your functions.

• The function getAnsNum() is redundant, at least i think so, just use questNum in your checkCorrect() function.

• For getElementByID function, insert an ID attribute to your input

   <input id="input" type="text" name="input"> 

• For input, if you want to take the value of the input field, use document.getElementById("input").value instead of innerHTML.

• If you not sure about any result, console.log it or use Chrome dev debug tool to check the result. In the checkCorrect function, your array name should be answers instead of answer.

Shorter ver:

const questions = ['What do young Roman males wear?','Who is the Roman god of the smith?','Who is the 6th king of Rome?'];

const answers = ['toga praetexta','vulcan','servius tullius'];
var questNum;
function getQuestNum() {
    questNum = Math.floor(Math.random() * 3);
};

function generateQuiz() {
    getQuestNum();
    document.getElementById("question").innerHTML = questions[questNum];
};

function checkCorrect() {
    if (answers[questNum] = document.getElementById("input").value) {
            document.getElementById("verification").innerHTML = "Correct!";
            }
};