<head>
  <script src="https://player.live-video.net/1.11.0/amazon-ivs-player.min.js"></script>
</head>
<body>
  <div class="row">
    <div class="col-md-12">
      <video id="video-player" controls autoplay playsinline></video>
      <div class="card mt-3">
        <div class="card-header bg-dark text-white">
          <h4>Question</h4>
        </div>
        <div class="card-body">
          <div class="card-title">
            <h4 id="question"></h4>
          </div>
          <div id="answerContainer">
            <ul id="answers" class="list-group"></ul>
          </div>
        </div>
        <div class="card-footer text-center">
          <button class="btn btn-dark" id="check-answer-btn" disabled>Submit</button>
        </div>
      </div>
    </div>
  </div>
</body>

body {
  padding: 10px;
}
video {
    width: 100%;
}
const init = () => {
  if(!IVSPlayer.isPlayerSupported) {
    alert('Your browser does not support the IVS video player. Please try a different browser.')
  }
  
  const videoEl = document.getElementById('video-player');
  const streamUrl = 'https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.xhP3ExfcX8ON.m3u8';
  const ivsPlayer = IVSPlayer.create();
  ivsPlayer.attachHTMLVideoElement(videoEl);
  ivsPlayer.load(streamUrl);
  ivsPlayer.play();

  document.getElementById('check-answer-btn').addEventListener('click', checkAnswer);
  
  ivsPlayer.addEventListener(IVSPlayer.PlayerEventType.TEXT_METADATA_CUE, (e) => {
    
    // parse the metadata and render the question
    const metadata = JSON.parse(e.text);

    // save the correct answer
    window.correctIndex = metadata.correctIndex;
    
    // enable the submit button
    document.getElementById('check-answer-btn').removeAttribute('disabled');
    
    // display the question
    document.getElementById('question').innerHTML = metadata.question;
    
    // clear previous answers
    const answersEl = document.getElementById('answers');
    answersEl.replaceChildren();
    
    // render the answers for this question
    metadata.answers.forEach((a, i) => {
      const answerEl = document.createElement('li');
      answerEl.classList.add('list-group-item');
      
      const answerRadio = document.createElement('input');
      answerRadio.setAttribute('name', 'answer-input');
      answerRadio.type = 'radio';
      answerRadio.id = `answer-input-${i}`;
      answerRadio.classList.add('me-2', 'form-check-input');
      answerRadio.dataset.index = i;
      answerEl.appendChild(answerRadio);
      
      const answerLbl = document.createElement('label');
      answerLbl.setAttribute('for', `answer-input-${i}`);
      answerLbl.innerHTML = a;
      answerEl.appendChild(answerLbl);
      
      answersEl.appendChild(answerEl);
    });
  });
}

const checkAnswer = () => {
  // disable the submit btn
  document.getElementById('check-answer-btn').setAttribute('disabled', 'disabled');
  
  // check the current answer
  const selectedAnswer = document.querySelector('input[name="answer-input"]:checked');
  const selectedIdx = parseInt(selectedAnswer.dataset.index);
  
  // highlight the correct answer
  document.querySelector(`input[data-index="${window.correctIndex}"]`).nextSibling.classList.add('text-success');
  
  // if they're wrong, highlight the incorrect answer
  if(selectedIdx !== window.correctIndex) {
    selectedAnswer.nextSibling.classList.add('text-danger');
  }
}

document.addEventListener('DOMContentLoaded', init);

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.