Как отобразить результат в .inner HTML из выбранного ответа в объекте

Question

Я хочу создать сайт, который задаст несколько вопросов, а затем сгенерирует 3 случайных местоположения на основе ответов пользователей. Часть, с которой я борюсь, - это получение конечного результата для вывода местоположений на основе первого вопроса в объекте:

const questions = [
{
    "question": "What area of the world are you thinking of discovering next?",
    "answer1": "Europe",
    "answer1Array": "europeArray",
    "answer2": "Asia",
    "answer2Array": "asiaArray",
    "answer3": "America",
    "answer3Array": "americaArray",
    "answer4": "Australasia",
    "answer4Array": "australasiaArray"        
},

let europeArray1 = ['Algarve - Portugal', 'Asturias and Covadonga - Spain', 'Mdina & Zebbug - Malta']
let asiaArray1 = ['Yakushima Island - Japan', 'Mount Wudang Shan - China', 'Bantayan Island - Philippines'] etc...

Затем я создал функцию, которая возвращает мне случайное местоположение:

let finalEuropeArray1 = europeArray1.sort(function() {
    return 0.5 - Math.random();
});

и, наконец, функция для вывода 3 результатов

function randomHoliday (array) {
if (array == europeArray1) {
    return finalEuropeArray1.slice(europeArray1,3);
} else if (array == americaArray1) {
    return finalAmericaArray1.slice(americaArray1,3);
} else if (array == asiaArray1 {
    return finalAsiaArray1.slice(asiaArray1,3);
} else {
    return finalAustralasiaArray1.slice(australasiaArray1,3);
}

Я могу вернуть 3 отдельных значения с функцией, вызывающей первый элемент в каждом:

let resultA = function seperateArrayA (randomHoliday) {
return `1. ${randomHoliday[0]}`;}
let resultB = function seperateArrayB (randomHoliday) {
return `2. ${randomHoliday[1]}`;}
let resultC = function seperateArrayC (randomHoliday) {
return `3. ${randomHoliday[2]}`;}

но я не знаю, как вывести это в моем окончательном .inner HTML на основе первого вопроса в объекте вопросов. Я могу заставить его работать, только введя ручную запись, например ${resultA(australasiaArray1)}

if(currentQuestion == totalQuestions) {
    container.style.display = 'none';
    result.innerHTML =
    `<h1 class="final-score">Our Top 3 Recommendations:</h1>
    <div class="summary">
        <p><br></br></p>
        <p>${resultA(australasiaArray1)}</p>
        <p>${resultB(australasiaArray1)}</p>
        <p>${resultC(australasiaArray1)}</p>
    </div>
    <button class="restart">Restart Quiz</button>
     `
};

Answer 1

Настройка может быть упрощена с помощью вложенных объектов для связанных ответов, ознакомьтесь с демонстрацией ниже:

const questions = [
    {
        "question": "What area of the world are you thinking of discovering next?",
        "answers": {
            "Europe": {
                "label": "Europe",
                "locations": ['Algarve - Portugal', 'Asturias and Covadonga - Spain', 'Mdina & Zebbug - Malta']
            },
            "Asia": {
                "label": "Asia",
                "locations": ['Yakushima Island - Japan', 'Mount Wudang Shan - China', 'Bantayan Island - Philippines']
            }
        }
    }
];


let getRandomLocationForAnswer = function (question, answer) {;
    const possibleLocations = question.answers[answer].locations;
    const randomIndex = Math.floor((Math.random()*possibleLocations.length));

    return possibleLocations[randomIndex];
}

let buildSelect = function(questions){
    return questions.map((question, index) => {
      const possibleAnswers = Object.keys(question.answers);
    
      return`<select class="question" data-question-index="${index}">${possibleAnswers.map(l => `<option value="${l}">${l}</option>`)}</select>`;
    }).join('');
}

let showResults = function(questions, questionIndex, answer){
  const question = questions[questionIndex];
  
  document.querySelector('#results').innerHTML =
    `<h1 class="final-score">Our Top 3 Recommendations:</h1>
    <div class="summary">
        <p><br></br></p>
        <p>${getRandomLocationForAnswer(question, answer)}</p>
        <p>${getRandomLocationForAnswer(question, answer)}</p>
        <p>${getRandomLocationForAnswer(question, answer)}</p>
    </div>
    <button class="restart">Restart Quiz</button>
     `
}

document.querySelector('#questions').innerHTML += buildSelect(questions);
document.querySelectorAll('.question').forEach(question => {
  question.addEventListener('change', e => {
    const select = e.currentTarget;
    showResults(questions, parseInt(select.dataset.questionIndex), select.value);
  });
});

<section id="questions">

</section>

<section id="results">

</section>

Answer 2

resultA, resultB, result C являются функциями, а не значениями. если вы поместите их в шаблон, вы получите ссылку на функцию, а не результат функции. Чтобы получить результат, вам нужно вызвать функцию (которую вы делаете в последнем фрагменте кода).

, чтобы заставить ее работать, просто определите переменные и установите для них результат функции:

    if(currentQuestion == totalQuestions) {
    container.style.display = 'none';
    var l_resultA = resultA(australasiaArray1)
    ...
    result.innerHTML =
       `<h1 class="final-score">Our Top 3 Recommendations:</h1>
           <div class="summary">
              <p><br></br></p>
              <p>${l_resultA}</p>
              ....
           </div>
        <button class="restart">Restart Quiz</button>`
};