Имеются исходники:
const quizData = [
{
question: "What does HTML stand for?",
a: "Helicopters Terminal Motorboats Lamborginis",
b: "Hypertext Markup Laguage",
c: "H <sup>2</sup> O",
correct: "b",
},
{
question: "What does CSS stand for?",
a: "Cascading Style Sheets",
b: "Cars SUVs Sailboats",
c: "Central Style Sheets",
correct: "a",
},
{
question: "What year did JavaScript appear?",
a: "1899",
b: "2005",
c: "1995",
correct: "c",
},
{
question: "Who is the author of the JavaScript language?",
a: "Bill Gates",
b: "Brendan Eich",
c: "Steve Jobs",
correct: "b",
},
{
question: "What language is this project written in?",
a: "JavaScript",
b: "Ruby",
c: "C++",
correct: "a",
},
];
const quiz = document.getElementById('quiz');
const answerElements = document.querySelectorAll('.answer');
const questionElement = document.getElementById('question');
const a_text = document.getElementById('a_text');
const b_text = document.getElementById('b_text');
const c_text = document.getElementById('c_text');
const submit = document.getElementById('submit');
let currentQuiz = 0;
let score = 0;
loadQuiz();
function loadQuiz(){
deselectAnswers();
const currentQuizData = quizData[currentQuiz];
console.log(quizData[currentQuiz].c)
questionElement.innerText = currentQuizData.question;
a_text.innerText = currentQuizData.a;
b_text.innerText = currentQuizData.b;
c_text.innerText = currentQuizData.c;
}
function deselectAnswers(){
answerElements.forEach(answerEl => answerEl.checked = false)
}
function getSelected(){
let answer;
answerElements.forEach(answerEl => {
if(answerEl.checked){
answer = answerEl.id;
}
});
return answer;
}
submit.addEventListener('click', () => {
const answer = getSelected();
if(answer){
if(answer === quizData[currentQuiz].correct){
score++;
}
currentQuiz++;
if(currentQuiz < quizData.length){
loadQuiz();
}
else{
quiz.innerHTML = `<h2>You answered coreectly at ${score}/${quizData.length} questions</h2>
<button onclick="location.reload()">Reload</button>
`;
}
}
});
Мне нужно вставить в строку с вариантом ответа тег , чтобы корректно отображать формулы при выводе вопроса с вариантами ответа, но при получается, какая-то лажа. Возможно ли без подключения jquery реализовать корректное отображение тегов?
css файл:
*{
box-sizing: border-box;
}
body{
font-family: 'Roboto', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
background: url('../images/bg.jpg') no-repeat;
background-position: center;
background-size: cover;
}
h2{
padding: 16px;
text-align: center;
margin: 0;
}
.quiz-box{
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
width: 600px;
overflow: hidden;
}
.quiz-header{
padding: 64px;
}
ul{
list-style: none;
padding: 0;
}
ul li{
font-size: 20px;
margin: 15px 0;
}
ul li label{
cursor: pointer;
}
button{
background-color: #5ec6eb;
border: none;
display: block;
width: 100%;
cursor: pointer;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
color: #000000;
padding: 15px;
transition: all 0.5s ease;
}
button:hover{
background-color: #438faa;
}
button:focus{
outline: none;
background-color: #5ec6eb;
}
.html файл:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<meta name = "format-detection" content = "telephone=no">
<title>Quiz Project</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div class="quiz-box" id="quiz">
<div class="quiz-header">
<h2 id="question">Question text</h2>
<ul>
<li>
<input type="radio" name="answer" id="a" class="answer">
<label for="a" id="a_text">Question</label>
</li>
<li>
<input type="radio" name="answer" id="b" class="answer">
<label for="b" id="b_text">Question</label>
</li>
<li>
<input type="radio" name="answer" id="c" class="answer">
<label for="c" id="c_text">Question</label>
</li>
</ul>
</div>
<button id="submit">Submit</button>
</div>
<!-- Scripts -->
<script src="main.js"></script>
</body>
</html>