How do i display api Data to html with Jquery?

JavaScript
1

I’m really new at Jquery and i’m trying to create a mulitplie choise quiz. The user will get 10 questions to answer. The questions will have several answer options and all the options will be show in connection with each question. The user will only be able to choose one answer option per question.

The thing i’m strugling with right now is how to display allTheAnswers to the html so i can se them on the screen. I figured out how to do with the questions but now i’m stuck and asking for som help and guidence.

HTML

<div class="start">
  <a href="#" >Start the Quiz</a>
</div>

  <div class="quiz">
    <h2>Question:</h2>
    <ul>
      <li></li>
    </ul>
  </div>

  <a href="#">Submit</a>

   <div id="next-question"></div>

Jquery

$(function() {

  const url = 'https://opentdb.com/api.php?amount=10';
  var questionIndex = 0;
  var start = $('.start');
  var quiz = $('.quiz');

  // counter - to keep track of current question
  var currentQuestionId = 0

  $.getJSON(url, function(data) {
    myQuestionData = data.results;

    let allTheAnswers = [];//all the answers 
    $.each(myQuestionData, function(i, value) {
      allTheAnswers.push({
        incorrect_answers: value.incorrect_answers,
        correct_answer: value.correct_answer
      });
    });

  }); //Json ends

  start.on('click', function() {
    start.hide();
    seeQuestion();
  });

  function seeQuestion() {
    var questions = myQuestionData[questionIndex];
    $('.quiz h2').text(questions.question); //question is viewed in h2
    console.log(questions);
    
    // myQuestionData.each((questionIndex, questionNumber) => {
    //     const answers = [];
    //     $.each(allTheAnswers, function(i, value) {
    //         answers.push({allTheAnswers});
    //       }
    //
    //     });

    };

  });
2

jquery is deadt learn javascript ea6

1 Like