diff --git a/script.js b/script.js
index 6782220..06189aa 100644
--- a/script.js
+++ b/script.js
@@ -75,18 +75,74 @@ function createElement(tag, attributes, children) {
return element;
}
-function displayQuestion(number, { question, correctAnswers, incorrectAnswers }) {
- const questionDiv = createElement('div', { class: 'question', style: 'margin: 20px 0; padding: 10px' }, `
-
${number}. Otázka
${question.replace(/(\w)\^(\w+)/g, '$1$2')}
- ${correctAnswers.length > 0 && incorrectAnswers.length > 0 ? 'Answers are available
' : 'No incorrect options right now
'}
- `);
+function displayQuestion(number, question, correctAnswers, incorrectAnswers) {
+ const questionsContainer = document.getElementById('questionsContainer');
+ const questionDiv = document.createElement('div');
+ questionDiv.className = 'question';
+ questionDiv.style.margin = '20px 0'; // Add margin to the question
+ questionDiv.style.padding = '10px'; // Add padding to the question
+
+ const questionText = document.createElement('h3');
+ questionText.innerHTML = `${number}. Otázka
${question.replace(/(\w)\^(\w+)/g, '$1$2')}`;
+ questionDiv.appendChild(questionText);
+
+ // Check if there are both correct and incorrect answers
+ if (correctAnswers.length > 0 && incorrectAnswers.length > 0) {
+ let answers = [correctAnswers[0]]; // Start with the first correct answer
+
+ // Add the first incorrect answer if there is one
+ if (incorrectAnswers.length > 0) {
+ answers.push(incorrectAnswers[0]);
+ }
+
+ // Add the rest of the answers
+ let remainingAnswers = correctAnswers.slice(1).concat(incorrectAnswers.slice(1));
+ while (answers.length < 4 && remainingAnswers.length > 0) {
+ let randomIndex = Math.floor(Math.random() * remainingAnswers.length);
+ answers.push(remainingAnswers[randomIndex]);
+ remainingAnswers.splice(randomIndex, 1); // Remove the selected answer from the remaining answers
+ }
+
+ // Shuffle the answers to be displayed
+ answers = shuffle(answers);
+
+ answers.forEach((answer, index) => {
+ const answerDiv = document.createElement('div');
+ answerDiv.className = 'form-check';
+ answerDiv.style.margin = '10px 15px'; // Add margin to the answer
+ answerDiv.style.padding = '5px'; // Add padding to the answer
+
+ const input = document.createElement('input');
+ input.type = 'checkbox';
+ input.name = `q${number}`;
+ input.id = `q${number}a${index}`;
+ input.className = 'form-check-input';
+ answerDiv.appendChild(input);
+
+ const label = document.createElement('label');
+ label.htmlFor = `q${number}a${index}`;
+ label.className = 'form-check-label';
+ // Replace "letter^something" with "lettersomething"
+ label.innerHTML = answer.replace(/(\w)\^(\w+)/g, '$1$2');
+ answerDiv.appendChild(label);
+
+ questionDiv.appendChild(answerDiv);
+ });
+ } else {
+ const paragraph = document.createElement('p');
+ paragraph.textContent = "No incorrect options right now";
+ questionDiv.appendChild(paragraph);
+ }
+
questionsContainer.appendChild(questionDiv);
}
+
function displayQuestions() {
+ const questionsContainer = document.getElementById('questionsContainer');
questionsContainer.innerHTML = '';
questions.slice(0, document.querySelector('#numQuestions').value || questions.length).forEach((question, index) => {
- displayQuestion(index + 1, question);
+ displayQuestion(index + 1, question.question, question.correctAnswers, question.incorrectAnswers);
});
}