1

Имеются исходники:

    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>

1 ответ 1

1
//a_text.innerText = currentQuizData.a;
a_text.innerHTML = currentQuizData.a;
...

const quizData = [{
    question: "What does HTML stand for?",
    a: "Helicopters Terminal Motorboats Lamborginis",
    b: "Hypertext Markup Laguage",
    c: "H<sub>2</sub>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.innerHTML = currentQuizData.a;
  b_text.innerHTML = currentQuizData.b;
  c_text.innerHTML = 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>
                `;
    }
  }
});
* {
  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;
}
<!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>

2
  • Спасибо большое! 23 июн 2021 в 14:29
  • 1
    @SergeySemkin Пожалуйста. Успехов.
    – user176262
    23 июн 2021 в 14:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.