<div class="question" th:each="question : ${questions}">
<h2 id="question" class="description" th:text="${question.description}">Question goes here</h2>
<div id="answer-buttons">
<button class="btn"><div class="answer" th:text="${question.possibleAnswers.get(0).content}" th:classappend="${question.correctAnswer == 1 ? 'correct-answer' : ''}">Answer 1</div></button>
<button class="btn"><div class="answer" th:text="${question.possibleAnswers.get(1).content}" th:classappend="${question.correctAnswer == 2 ? 'correct-answer' : ''}">Answer 2</div></button>
<button class="btn"><div class="answer" th:text="${question.possibleAnswers.get(2).content}" th:classappend="${question.correctAnswer == 3 ? 'correct-answer' : ''}">Answer 3</div></button>
<button class="btn"><div class="answer" th:text="${question.possibleAnswers.get(3).content}" th:classappend="${question.correctAnswer == 4 ? 'correct-answer' : ''}">Answer 4</div></button>
</div>
<button id="next-btn">Next</button>
</div>
If I figured correctly, th:each from the above code makes a new division for every question in questions, similar to this:
<div class="quiz">
<div class="question">
<h2 id="question" class="description">Question</h2>
<div id="answer-buttons">
<button class="btn"><div class="answer">Answer 1</div></button>
<button class="btn"><div class="answer correct-answer">Answer 2</div></button>
<button class="btn"><div class="answer">Answer 3</div></button>
<button class="btn"><div class="answer">Answer 4</div></button>
</div>
<button id="next-btn">Next</button>
</div>
</div>
Questions come from database and I have js file to handle them but in order to do so I don’t want extra html bodies to be created.
So my question is, does Thymeleaf have some disabler mechanism for above mentioned problem or do I need to change the structure of my code?
For any use, here is how my script handles the data:
const questionsFromDb = document.querySelectorAll('.question');
// Template
const questions = [
{
question: "Which is the largest animal on the planet?",
answers: [
{text: "Shark", correct: false},
{text: "Blue whale", correct: true},
{text: "Elephant", correct: false},
{text: "Giraffe", correct: false}
]
},
{
question: "Which is the smallest country on the planet?",
answers: [
{text: "Vatican City", correct: true},
{text: "Bhutan", correct: false},
{text: "Nepal", correct: false},
{text: "Shri Lanka", correct: false}
]
},
{
question: "Which is the largest desert on the planet?",
answers: [
{text: "Kalahari", correct: false},
{text: "Gobi", correct: false},
{text: "Sahara", correct: false},
{text: "Antarctica", correct: true}
]
},
{
question: "Which is the smallest continent on the planet?",
answers: [
{text: "Asia", correct: false},
{text: "Australia", correct: true},
{text: "Arctic", correct: false},
{text: "Africa", correct: false}
]
}
];
// Parsing Data
questionsFromDb.forEach(questionFromDb => {
const questionDescription = questionFromDb.querySelector('.description').innerText;
const answerElements = questionFromDb.querySelectorAll('.answer');
const answers = [];
answerElements.forEach((answerElement, index) => {
const answerText = answerElement.innerText;
const isCorrect = answerElement.classList.contains('correct-answer');
answers.push({ text: answerText, correct: isCorrect });
});
questions.push({
question: questionDescription,
answers: answers
});
});
// ... Non-relative code below
