Как я могу отобразить видео (как вопрос) и изображения (как ответы) внутри викторины JS?

Question

У меня есть отличный учебник по «объяснению кода» (https://youtu.be/49pYIMygIcU), который я пытаюсь отредактировать для своих нужд. Мне нужно изменить вопросы на отображение видео, а ответы на изображения. как я могу отредактировать этот тест?

У меня есть URL-адреса видео с YouTube, которые я пытаюсь реализовать, но я не уверен, нужно ли мне менять синтаксис

// select all elements
const start = document.getElementById("start");
const quiz = document.getElementById("quiz");
const question = document.getElementById("question");
const qImg = document.getElementById("qImg");
const choiceA = document.getElementById("A");
const choiceB = document.getElementById("B");
const choiceC = document.getElementById("C");
const counter = document.getElementById("counter");
const timeGauge = document.getElementById("timeGauge");
const progress = document.getElementById("progress");
const scoreDiv = document.getElementById("scoreContainer");

// create our questions
let questions = [{
  question: "What does HTML stand for?",
  imgSrc: "img/html.png",
  choiceA: "Correct",
  choiceB: "Wrong",
  choiceC: "Wrong",
  correct: "A"
}, {
  question: "What does CSS stand for?",
  imgSrc: "img/css.png",
  choiceA: "Wrong",
  choiceB: "Correct",
  choiceC: "Wrong",
  correct: "B"
}, {
  question: "What does JS stand for?",
  imgSrc: "img/js.png",
  choiceA: "Wrong",
  choiceB: "Wrong",
  choiceC: "Correct",
  correct: "C"
}];

// create some variables

const lastQuestion = questions.length - 1;
let runningQuestion = 0;
let count = 0;
const questionTime = 10; // 10s
const gaugeWidth = 150; // 150px
const gaugeUnit = gaugeWidth / questionTime;
let TIMER;
let score = 0;

// render a question
function renderQuestion() {
  let q = questions[runningQuestion];

  question.innerHTML = "<p>" + q.question + "</p>";
  qImg.innerHTML = "<img src=" + q.imgSrc + ">";
  choiceA.innerHTML = q.choiceA;
  choiceB.innerHTML = q.choiceB;
  choiceC.innerHTML = q.choiceC;
}

start.addEventListener("click", startQuiz);

// start quiz
function startQuiz() {
  start.style.display = "none";
  renderQuestion();
  quiz.style.display = "block";
  renderProgress();
  renderCounter();
  TIMER = setInterval(renderCounter, 1000); // 1000ms = 1s
}

// render progress
function renderProgress() {
  for (let qIndex = 0; qIndex <= lastQuestion; qIndex++) {
    progress.innerHTML += "<div class='prog' id=" + qIndex + "></div>";
  }
}

// counter render

function renderCounter() {
  if (count <= questionTime) {
    counter.innerHTML = count;
    timeGauge.style.width = count * gaugeUnit + "px";
    count++
  } else {
    count = 0;
    // change progress color to red
    answerIsWrong();
    if (runningQuestion < lastQuestion) {
      runningQuestion++;
      renderQuestion();
    } else {
      // end the quiz and show the score
      clearInterval(TIMER);
      scoreRender();
    }
  }
}

// checkAnwer

function checkAnswer(answer) {
  if (answer == questions[runningQuestion].correct) {
    // answer is correct
    score++;
    // change progress color to green
    answerIsCorrect();
  } else {
    // answer is wrong
    // change progress color to red
    answerIsWrong();
  }
  count = 0;
  if (runningQuestion < lastQuestion) {
    runningQuestion++;
    renderQuestion();
  } else {
    // end the quiz and show the score
    clearInterval(TIMER);
    scoreRender();
  }
}

// answer is correct
function answerIsCorrect() {
  document.getElementById(runningQuestion).style.backgroundColor = "#0f0";
}

// answer is Wrong
function answerIsWrong() {
  document.getElementById(runningQuestion).style.backgroundColor = "#f00";
}

// score render
function scoreRender() {
  scoreDiv.style.display = "block";

  // calculate the amount of question percent answered by the user
  const scorePerCent = Math.round(100 * score / questions.length);

  // choose the image based on the scorePerCent
  let img = (scorePerCent >= 80) ? "img/5.png" :
    (scorePerCent >= 60) ? "img/4.png" :
    (scorePerCent >= 40) ? "img/3.png" :
    (scorePerCent >= 20) ? "img/2.png" :
    "img/1.png";

  scoreDiv.innerHTML = "<img src=" + img + ">";
  scoreDiv.innerHTML += "<p>" + scorePerCent + "%</p>";
}

body {
  font-size: 20px;
  font-family: monospace;
}

#container {
  margin: 20px auto;
  background-color: white;
  height: 300px;
  width: 700px;
  border-radius: 5px;
  box-shadow: 0px 5px 15px 0px;
  position: relative;
}

#start {
  font-size: 1.5em;
  font-weight: bolder;
  word-break: break-all;
  width: 100px;
  height: 150px;
  border: 2px solid lightgrey;
  text-align: center;
  cursor: pointer;
  position: absolute;
  left: 300px;
  top: 50px;
  color: lightgrey;
}

#start:hover {
  border: 3px solid lightseagreen;
  color: lightseagreen;
}

#qImg {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0px;
  top: 0px;
}

#qImg img {
  width: 200px;
  height: 200px;
  border-top-left-radius: 5px;
}

#question {
  width: 500px;
  height: 125px;
  position: absolute;
  right: 0;
  top: 0;
}

#question p {
  margin: 0;
  padding: 15px;
  font-size: 1.25em;
}

#choices {
  width: 480px;
  position: absolute;
  right: 0;
  top: 125px;
  padding: 10px
}

.choice {
  display: inline-block;
  width: 135px;
  text-align: center;
  border: 1px solid grey;
  border-radius: 5px;
  cursor: pointer;
  padding: 5px;
}

.choice:hover {
  border: 2px solid grey;
  font-weight: bold;
}

#timer {
  position: absolute;
  height: 100px;
  width: 200px;
  bottom: 0px;
  text-align: center;
}

#counter {
  font-size: 3em;
}

#btimeGauge {
  width: 150px;
  height: 10px;
  border-radius: 10px;
  background-color: lightgray;
  margin-left: 25px;
}

#timeGauge {
  height: 10px;
  border-radius: 10px;
  background-color: mediumseagreen;
  margin-top: -10px;
  margin-left: 25px;
}

#progress {
  width: 500px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  padding: 5px;
  text-align: right;
}

.prog {
  width: 25px;
  height: 25px;
  border: 1px solid #000;
  display: inline-block;
  border-radius: 50%;
  margin-left: 5px;
  margin-right: 5px;
}

#scoreContainer {
  margin: 20px auto;
  background-color: white;
  opacity: 0.8;
  height: 300px;
  width: 700px;
  border-radius: 5px;
  box-shadow: 0px 5px 15px 0px;
  position: relative;
  display: none;
}

#scoreContainer img {
  position: absolute;
  top: 100px;
  left: 325px;
}

#scoreContainer p {
  position: absolute;
  display: block;
  width: 59px;
  height: 59px;
  top: 130px;
  left: 325px;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Quiz</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="container">
    <div id="start">Start Quiz!</div>
    <div id="quiz" style="display: none">
      <div id="question"></div>
      <div id="qImg"></div>
      <div id="choices">
        <div class="choice" id="A" onclick="checkAnswer('A')"></div>
        <div class="choice" id="B" onclick="checkAnswer('B')"></div>
        <div class="choice" id="C" onclick="checkAnswer('C')"></div>
      </div>
      <div id="timer">
        <div id="counter"></div>
        <div id="btimeGauge"></div>
        <div id="timeGauge"></div>
      </div>
      <div id="progress"></div>
    </div>
    <div id="scoreContainer" style="display: none"></div>
  </div>
  <script src="quiz.js"></script>
</body>

</html>