Cześć, wiem że pewnie nie o to Ci chodziło, ale ja bym to napisał tak: (Nie jest w 100% optymalnie, ale jest to dobra baza pod ewentualne rozbudowy)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="quiz-container">
</div>
<script src="app.js"></script>
</body>
</html>
const div_quiz = document.querySelector('#quiz-container');
var point_counter = 0;
const questions = {
'question_1' : {
'text' : 'Which item is a vegetable?',
'answers' : ['Apple', 'Tomato', 'Banan', 'Orange'],
'right_answer' : 'Tomato'
}
}
/**
* Main function, which creates a question with its answers
*/
function createQuestion(question)
{
addQuestionText(question);
addAnswers(question);
addAnswerValues(question);
insertSubmitButton();
document.querySelector('#check-answer').addEventListener('click', getAnswer);
}
/**
* Creates a 'p' element, adds a question text
* from 'questions' object
*
* @param {string} question
*/
function addQuestionText(question)
{
let new_para = document.createElement('p');
new_para .setAttribute('id', question);
new_para .textContent = questions[question]['text'];
div_quiz .appendChild(new_para);
}
/**
* Creates radio inputs based answer array
* in the 'questions' object
* Appends it to the div
*
* @param {string} question
*/
function addAnswers(question)
{
for (i = 0; i < questions[question]['answers'].length; i++)
{
let answer_radio = document.createElement('input');
answer_radio .setAttribute('name', 'answer');
answer_radio .setAttribute('class', 'answer');
answer_radio .setAttribute('type', 'radio');
let label = document.createElement('label');
label .setAttribute('class', 'answer-label');
div_quiz .appendChild(answer_radio);
div_quiz .appendChild(label);
}
}
/**
* Adds values to the radio inputs
* with coresponding labels
*
* @param {string} question
*/
function addAnswerValues(question)
{
answer_inputs = document.querySelectorAll('.answer');
answer_labels = document.querySelectorAll('.answer-label');
for (i = 0; i < questions[question]['answers'].length; i++)
{
answer_inputs[i] .setAttribute('value', questions[question]['answers'][i]);
answer_labels[i] .textContent = questions[question]['answers'][i];
}
}
/**
* Inserts a simple button which will be used
* to fire an event which cheks the proper answer
*/
function insertSubmitButton()
{
let submit_button = document.createElement('button');
submit_button .setAttribute('id', 'check-answer');
submit_button .textContent = 'Sprawdź';
div_quiz.appendChild(submit_button);
}
/**
* Checks which radio button was chosen by user
* Then gets a boolean result from compareResult function
* Then checks the result with the object properties
*/
function getAnswer()
{
let question_id = document.querySelector('p');
question_id = question_id.getAttribute('id')
let inputs = document.querySelectorAll('input');
let user_answer;
for (let i = 0; i < inputs.length; i++)
{
if (inputs[i].checked)
{
user_answer = inputs[i].value;
}
}
let result = compareResult(user_answer, question_id);
if (result)
{
div_quiz.innerHTML = "<p>Udało się. To prawidłowa odpowiedź!</p>";
point_counter++;
div_quiz.innerHTML += "<p>Twoja liczba punktów to: " + point_counter + "</p>";
} else
{
div_quiz.innerHTML = "<p>Niestety, to zła odpowiedź!</p>";
}
}
/**
* Checks if the user answer is equal to the right_answer property
*
* @param {string} answer
* @param {string} question
*/
function compareResult(answer, question)
{
return answer == questions[question]['right_answer'];
}
Odpalasz funkcję createQuestion i jako argument podajesz string z nazwą pytania w tym obiekcie wyżej. i Ci automatycznie tworzy inputy, labele oraz eventListener do sprawdzenia, czy wybrano poprawną odpowiedź. Z tym, że to narazie działa tylko dla jednego pytania. Ale umożliwa łatwe rozbudowanie aplikacji przez dodawanie kolejny elementów obiektu questions.
