Commit inicial

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta charset="UTF-8">

    <title>Quiz Perfil Empreendedor</title>

    <!-- Google Font -->

    <link

      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"

      rel="stylesheet"

    />

    <!-- Stylesheet -->

    <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    <div class="start-screen">

      <button id="start-button">Iniciar</button>

    </div>

    <div id="display-container">

      <div class="header">

        <div class="number-of-count">

          <span class="number-of-question">1 de 3 perguntas</span>

        </div>

        <div class="timer-div">

          <img src="timer-icon.svg" />

          <span class="time-left">15s</span>

        </div>

      </div>

      <div id="container">

        <!-- questions and options will be displayed here -->

      </div>

      <button id="next-button">Próxima</button>

    </div>

    <div class="score-container hide">

      <div id="user-score">Pontuação</div>

      <div id="theme-score" class="score-theme-container">

        <h4>Desempenho por temas</h4>

      </div>

      <button id="restart">Reiniciar</button>

    </div>

    <!-- Script -->

    <script src="perguntas.js"></script>

    <script src="script.js"></script>

  </body>

</html>

// Configurções

const time4Question = 16

//References

let timeLeft = document.querySelector(".time-left");

let quizContainer = document.getElementById("container");

let nextBtn = document.getElementById("next-button");

let countOfQuestion = document.querySelector(".number-of-question");

let displayContainer = document.getElementById("display-container");

let scoreContainer = document.querySelector(".score-container");

let restart = document.getElementById("restart");

let userScore = document.getElementById("user-score");

let themeScore = document.getElementById("theme-score");

let startScreen = document.querySelector(".start-screen");

let startButton = document.getElementById("start-button");

let questionCount;

let scoreCount = 0;

let count = time4Question;

let countdown;

let themeList = [];

//Restart Quiz

restart.addEventListener("click", () => {

  initial();

  displayContainer.classList.remove("hide");

  scoreContainer.classList.add("hide");

});

//Next Button

nextBtn.addEventListener(

  "click",

  (displayNext = () => {

    //increment questionCount

    questionCount += 1;

    //if last question

    if (questionCount == quizArray.length) {

      //hide question container and display score

      displayContainer.classList.add("hide");

      scoreContainer.classList.remove("hide");

      //user score

      userScore.innerHTML =

        "Respondidas " + questionCount + " de " + questionCount + " questões";

      let table = `

      <table class="tg">

      <thead>

          <tr>

              <th class="tg-0lax">Tema</th>

              <th class="tg-0lax">Pontuação</th>

              <th class="tg-0lax">Pontuação<br />Máxima</th>

              <th class="tg-0lax">% Acerto</th>

              <th class="tg-0lax">Questões<br />Respondidas</th>

              <th class="tg-0lax">Total de<br />Questões</th>

          </tr>

      </thead>

      <tbody>`;

      themeList.forEach( (theme) => {

        let num = (theme.maxScoreTheme == 0 ? 0 : (theme.score / theme.maxScoreTheme * 100));

        table += "<tr><td class='tg-0lax'>" + theme.name + "</td>" +

                                "<td class='tg-0lax'>" + theme.score + "</td>" +

                                "<td class='tg-0lax'>" + theme.maxScoreTheme + "</td>" +

                                "<td class='tg-0lax'>" + num.toFixed(0).toLocaleString("pt-BR") + "%</td>" +

                                "<td class='tg-0lax'>" + theme.answeredQuestions + "</td>" +

                                "<td class='tg-0lax'>" + theme.numberOfQuestions + "</td></tr>\r\n";

      });

      table += "</tbody>\r\n</table>\r\n";

      themeScore.innerHTML = table;

    } else {

      //display questionCount

      countOfQuestion.innerHTML =

        questionCount + 1 + " de " + quizArray.length + " perguntas";

      //display quiz

      quizDisplay(questionCount);

      count = time4Question;

      clearInterval(countdown);

      timerDisplay();

    }

  })

);

//Timer

const timerDisplay = () => {

  countdown = setInterval(() => {

    count--;

    timeLeft.innerHTML = `${count}s`;

    if (count == 0) {

      clearInterval(countdown);

      displayNext();

    }

  }, 1000);

};

//Display quiz

const quizDisplay = (questionCount) => {

  let quizCards = document.querySelectorAll(".container-mid");

  //Hide other cards

  quizCards.forEach((card) => {

    card.classList.add("hide");

  });

  //display current question card

  quizCards[questionCount].classList.remove("hide");

};

//Quiz Creation

function quizCreator() {

  //randomly sort questions

  quizArray.sort(() => Math.random() - 0.5);

  //generate quiz

  for (let i of quizArray) {

    //randomly sort options

    i.options.sort(() => Math.random() - 0.5);

    //quiz card creation

    let div = document.createElement("div");

    div.classList.add("container-mid", "hide");

    //question number

    countOfQuestion.innerHTML = 1 + " de " + quizArray.length + " perguntas";

    //question

    let theme_DIV = document.createElement("p");

    theme_DIV.classList.add("theme");

    theme_DIV.innerHTML = "Tema: " + i.theme;

    div.appendChild(theme_DIV);

    let question_DIV = document.createElement("p");

    question_DIV.classList.add("question");

    question_DIV.innerHTML = i.question;

    div.appendChild(question_DIV);

    //options - #TODO, automatizar as opções de acordo com a quantidade no array

    div.innerHTML += `

    <button class="option-div" onclick="checker(this)">${i.options[0].text}</button>

     <button class="option-div" onclick="checker(this)">${i.options[1].text}</button>

      <button class="option-div" onclick="checker(this)">${i.options[2].text}</button>

    `;

    quizContainer.appendChild(div);

  }

}

//  addScore to Theme

function addScore2Theme(userSolution, themeIndex) {

  quizArray[questionCount].options.forEach( (option) => {

    if ( userSolution === option.text ) {

      themeList[themeIndex].score += option.score;

    }

  });

}

//Checker Function to:

//   if type = 'answer' -> check if option is correct or not

//   if type = 'noAnswer' -> sum the corresponding points to theme array

function checker(userOption) {

  let userSolution = userOption.innerText;

  let question =

    document.getElementsByClassName("container-mid")[questionCount];

  let options = question.querySelectorAll(".option-div");

  // CHeck question type

  if (quizArray[questionCount].type === "answer") {

    //if user clicked answer == correct option stored in object

    if (userSolution === quizArray[questionCount].correct) {

      userOption.classList.add("correct");

      scoreCount++;

      addScore2Theme(userSolution, quizArray[questionCount].themeIndex);

    } else {

      userOption.classList.add("incorrect");

      //For marking the correct option

      options.forEach((element) => {

        if (element.innerText == quizArray[questionCount].correct) {

          element.classList.add("correct");

        }

      });

    }

  }

  else {

    userOption.classList.add("correct");

    addScore2Theme(userSolution, quizArray[questionCount].themeIndex);

  }

  // incrementar answeredQuestions themeList

  themeList[quizArray[questionCount].themeIndex].answeredQuestions++;

  themeList[quizArray[questionCount].themeIndex].maxScoreTheme += quizArray[questionCount].maxScore;

  //clear interval(stop timer)

  clearInterval(countdown);

  //disable all options

  options.forEach((element) => {

    element.disabled = true;

  });

}

// theme list creator

function themeListCreator() {

  quizArray.forEach((question) => {

    let i = -1;

    let themeIndex = 0;

    i = themeList.findIndex((theme) => {

          return (question.theme === theme.name)

    })

    if (i == -1) {

      themeIndex = themeList.push({

        name: question.theme,

        numberOfQuestions: 1,

        answeredQuestions: 0,

        maxScoreTheme: 0,

        score: 0,

      });

      themeIndex--;

    }

    else {

      themeList[i].numberOfQuestions++;

      themeIndex = i;

    }

    question.themeIndex = themeIndex;

  });

} 

//initial setup

function initial() {

  quizContainer.innerHTML = "";

  questionCount = 0;

  scoreCount = 0;

  count = time4Question;

  clearInterval(countdown);

  timerDisplay();

  themeList = [];

  themeListCreator();

  quizCreator();

  quizDisplay(questionCount);

}

//when user click on start button

startButton.addEventListener("click", () => {

  startScreen.classList.add("hide");

  displayContainer.classList.remove("hide");

  initial();

});

//hide quiz and display start screen

window.onload = () => {

  startScreen.classList.remove("hide");

  displayContainer.classList.add("hide");

};

* {

  padding: 0;

  margin: 0;

  box-sizing: border-box;

  font-family: "Poppins", sans-serif;

}

body {

  background-color: #0a69ed;

}

.start-screen,

.score-container {

  position: absolute;

  top: 0;

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}

.score-theme-container {

  border-top: 0.1em solid #fff;

  border-bottom: 0.1em solid #fff;

  font-size: 1em;

  color: #fff;

  justify-content: left;

  margin: 1.5em 0 1.5em 0;

  padding: 1.0em 0 1.0em 0;

}

button {

  border: none;

  outline: none;

  cursor: pointer;

}

#start-button,

#restart {

  font-size: 1.3em;

  padding: 0.5em 1.8em;

  border-radius: 0.2em;

}

#restart {

  margin-top: 0.9em;

}

#display-container {

  background-color: #ffffff;

  padding: 3.1em 1.8em;

  width: 80%;

  max-width: 37.5em;

  margin: 0 auto;

  position: absolute;

  transform: translate(-50%, -50%);

  top: 50%;

  left: 50%;

  border-radius: 0.6em;

}

.header {

  margin-bottom: 1.8em;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-bottom: 0.6em;

  border-bottom: 0.1em solid #c0bfd2;

}

.timer-div {

  background-color: #e1f5fe;

  width: 7.5em;

  border-radius: 1.8em;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0.7em 1.8em;

}

.theme {

  margin-bottom: 1.25em;

  font-weight: 600;

  font-size: 1.1em;

  color:#0a69ed;

}

.question {

  margin-bottom: 1.25em;

  font-weight: 600;

}

.option-div {

  font-size: 0.9em;

  width: 100%;

  padding: 1em;

  margin: 0.3em 0;

  text-align: left;

  outline: none;

  background: transparent;

  border: 1px solid #c0bfd2;

  border-radius: 0.3em;

}

.option-div:disabled {

  color: #000000;

  cursor: not-allowed;

}

#next-button {

  font-size: 1em;

  margin-top: 1.5em;

  background-color: #0a69ed;

  color: #ffffff;

  padding: 0.7em 1.8em;

  border-radius: 0.3em;

  float: right;

}

.hide {

  display: none;

}

.incorrect {

  background-color: #ffdde0;

  color: #d32f2f;

  border-color: #d32f2f;

}

.correct {

  background-color: #e7f6d5;

  color: #689f38;

  border-color: #689f38;

}

#user-score {

  font-size: 1.5em;

  color: #ffffff;

}

/* score table styling */

.tg {

  border-collapse: collapse;

  border-spacing: 0;

  margin: 0px auto;

}

.tg td {

  border-color: white;

  border-style: solid;

  border-width: 1px;

  overflow: hidden;

  padding: 10px 10px;

  word-break: normal;

}

.tg th {

  border-color: white;

  border-style: solid;

  border-width: 1px;

  font-weight: 700;

  overflow: hidden;

  padding: 10px 10px;

  word-break: normal;

}

.tg .tg-0lax {

  text-align: center;

  vertical-align: middle;

}

@media screen and (max-width: 767px) {

  .tg {

      width: auto !important;

  }

  .tg col {

      width: auto !important;

  }

  .tg-wrap {

      overflow-x: auto;

      -webkit-overflow-scrolling: touch;

      margin: auto 0px;

  }

}

 No newline at end of file

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#0a69ed;}</style></defs><path class="cls-1" d="M11.88,0a1.25,1.25,0,0,1,0,2.5h-.63V3.85a8,8,0,0,1,3.89,1.74L16,4.74a1.25,1.25,0,0,1,1.77,1.77l-.94.94A8.2,8.2,0,0,1,17.9,13.8a8,8,0,0,1-5.88,6A8.13,8.13,0,1,1,8.75,3.85V2.5H8.13a1.25,1.25,0,1,1,0-2.5Zm-.94,7.5a.94.94,0,1,0-1.88,0v5a.94.94,0,1,0,1.88,0Z"/></svg>

 No newline at end of file