Go to nextURL on local server

Question

I need to go to the next URL after a correct answer on a quiz. I have an assignment where I'm creating a Quiz game with questions from a server at the university. When the person is correct the game gets the next question on the server with a XMLHttpRequest. How can I somehow us a 'nextURL' here or is there no such term?

function Question () {
 let quizQuestion = new window.XMLHttpRequest()
 quizQuestion.open('GET', 'http://vhost3.lnu.se:20080/question/1')
 quizQuestion.onload = function () {
   let ourData = JSON.parse(quizQuestion.responseText)
   let questionDiv = document.querySelector('#question')
   questionDiv.innerText = ourData.question
 }
 quizQuestion.send()
 answer()
}

function answer () {
    let quizQuestion = new window.XMLHttpRequest()
    let answerDiv = document.querySelector('#answer')
    let button = document.createElement('button')
    button.type = 'button'
    button.setAttribute('id', 'send')
    button.innerText = 'Answer'
    answerDiv.appendChild(button)

button.addEventListener('click', function () {
    quizQuestion.open('POST', 'http://vhost3.lnu.se:20080/answer/1')
    quizQuestion.setRequestHeader('Content-type', 'application/json')
    quizQuestion.send(JSON.stringify({answer: inputText.value}))

    quizQuestion.onreadystatechange = function () {
    console.log(quizQuestion.response)
    let ourAnswer = JSON.parse(quizQuestion.responseText)
    let answerDiv = document.querySelector('#answer')
    answerDiv.innerText = ourAnswer.message
    }
  })
}

So if the value in ({answer: inputText.value}) is correct I want to go to the next question, which in this case is in quizQuestion.open('GET', 'http://vhost3.lnu.se:20080/question/21')

Answer 1

Based on what you've written, it looks like "next URL" at any given moment would be next in a list that you've been given, and it's up to you to figure out how to retrieve the appropriate one after a correct answer.

We'll assume the question numbers in your assignment are non-sequential (moving from question 1 to question 21 in your example), and that no questions repeat. Is there a list of the questions in the order you need on the server? If the list is in an array, can you access it based on the index of the current question?

If not, assuming you already know the list of questions in the desired order, you can do this in your own code. Suppose you put your question numbers into an array, and store the current question number, like so:

let questionNums = [1,21,14,9,6,23]
let currQuestionNum = questionNums[0]

This lets you concatenate the desired question number onto your base URL as

'http://vhost3.lnu.se:20080/question/' + currQuestionNum.toString().  

Then, when you've checked if the answer is correct, you can move to the next question in the array:

if (questionNums.indexOf(currQuestionNum)+1 != questionNums.length){
  currQuestionNum = questionNums[questionNums.indexOf(currQuestionNum)+1]
}
else{
  //end the quiz
}

To use this with the concatenation example above, you'll need to modify your Question and answer functions to accept question numbers as parameters:

function Question (questionNum) {
 let quizQuestion = new window.XMLHttpRequest()
 quizQuestion.open('GET', 'http://vhost3.lnu.se:20080/question/'+questionNum)
 quizQuestion.onload = function () {
   let ourData = JSON.parse(quizQuestion.responseText)
   let questionDiv = document.querySelector('#question')
   questionDiv.innerText = ourData.question
 }
 quizQuestion.send()
 answer(questionNum)
}

function answer (questionNum) {
    let quizQuestion = new window.XMLHttpRequest()
    let answerDiv = document.querySelector('#answer')
    //Local answerNum variable
    let answerNum = questionNum
    let button = document.createElement('button')
    button.type = 'button'
    button.setAttribute('id', 'send')
    button.innerText = 'Answer'
    answerDiv.appendChild(button)

button.addEventListener('click', function () {
    quizQuestion.open('POST', 'http://vhost3.lnu.se:20080/answer/'+answerNum)
    quizQuestion.setRequestHeader('Content-type', 'application/json')
    quizQuestion.send(JSON.stringify({answer: inputText.value}))

    quizQuestion.onreadystatechange = function () {
    console.log(quizQuestion.response)
    let ourAnswer = JSON.parse(quizQuestion.responseText)
    let answerDiv = document.querySelector('#answer')
    answerDiv.innerText = ourAnswer.message
    }
  })
}

Note the local answerNum variable - this is added so that, if quesitonNum changes before the anonymous function is called on a click event, the value won't be affected.