* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.6;
}

.container {
  height: 700px;
  width: 1400px;
  position: relative;
}

.start h1 {
  font-weight: 100;
  font-size: 40px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  background-color: #41444b;
  padding: 20px 30px;
  color: white;
    border-radius: 50%;

  
}

.quiz {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;

  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-row-gap: 20px;

  visibility: hidden;
}

.quiz > * {
  display: flex;
  align-items: center;
  justify-content: center;
}

.question {
  font-size: 35px;
  letter-spacing: 2px;
  background-color: rgba(247, 247, 247, 0.7);
  place-self: center;
  padding: 15px 30px;
  text-align: center;
}

/* .quiz .question {
  background-color: lightcyan;
} */

/* .quiz .choices {
  background-color: lightsalmon;
} */

/* .quiz .timer {
  background-color: lightskyblue;
} */

/* .quiz .progress {
  background-color: lemonchiffon;
} */

/* Answer Choices */
.choices {
  width: 100%;
  justify-content: space-evenly;
  align-items: flex-end;
}

.choice {
  cursor: pointer;
  background-color: rgba(27, 118, 141, 0.7);
  padding: 7px 15px;
  text-align: center;
  color: white;
  font-size: 20px;
  height: 100px;
  width: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
    border-radius: 50%;
}

/* Answer Timer */
.timer {
  align-self: flex-end;
  flex-direction: column;
}

.counter {
  font-size: 40px;
  color: rgb(27, 118, 141);
}

.time-gauge-bg,
.time-gauge {
  position: absolute;
  top: 78%;
  left: 22%;
}

.time-gauge-bg {
  height: 10px;
  width: 800px;
  background-color: lightgrey;
}

.time-gauge {
  height: 10px;
  background-color: rgb(179, 6, 247);
}

/* Progress Container */
.progress-box {
  height: 30px;
  width: 30px;
  background-color: lightgrey;
  margin-left: 15px;
    border-radius: 50%;
}

/* Score Container */
.score-container {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.85);
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  padding: 50px 100px;

  visibility: hidden;
}

.score-container h2 {
  font-size: 30px;
  font-weight: 100;
  text-align: center;
  color: white;
}

const start = document.querySelector(".start");
const quiz = document.querySelector(".quiz");
const question = document.querySelector(".question");
const allAnswerChoices = document.querySelectorAll(".choice");
const answerChoiceA = document.querySelector("#A");
const answerChoiceB = document.querySelector("#B");
const answerChoiceC = document.querySelector("#C");
const answerChoiceD = document.querySelector("#D");
const counter = document.querySelector(".counter");
const timeGauge = document.querySelector(".time-gauge");
const progressContainer = document.querySelector(".progress-container");
const ScoreContainer = document.querySelector(".score-container");

// Questions
let questions = [
  {
    question: "How many different sounds can a cat make?",
    questionImg: "https://cdn.pixabay.com/photo/2022/04/21/19/42/birds-7148194_960_720.jpg",
    choiceA: "100",
    choiceB: "150",
    choiceC: "10",
    choiceD: "27",
    correctAnswer: "100",
  },
  {
    question: "What breed of cat has a reputation for being cross-eyed?",
    questionImg: "https://cdn.pixabay.com/photo/2021/12/28/11/37/castle-6899042_960_720.jpg",
    choiceA: "Himalayan",
    choiceB: "Egyptian Mau",
    choiceC: "Siamese",
    choiceD: "Persian",
    correctAnswer: "Siamese",
  },
  {
    question: "What is the most common training command taught to dogs?",
    questionImg: "https://cdn.pixabay.com/photo/2022/05/04/15/42/dog-7174266_960_720.jpg",
    choiceA: "Stay",
    choiceB: "Sit",
    choiceC: "Dance",
    choiceD: "Roll",
    correctAnswer: "Sit",
  },
  {
    question: "What is a dog’s most highly developed sense?",
    questionImg: "https://cdn.pixabay.com/photo/2018/06/29/23/27/poppies-3506807_960_720.jpg",
    choiceA: "Smell",
    choiceB: "Sight",
    choiceC: "Taste",
    choiceD: "Touch",
    correctAnswer: "Smell",
  },
  {
    question: " How many known species of birds are there?",
    questionImg: "https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg",
    choiceA: "5,000",
    choiceB: "10,000",
    choiceC: "20,000",
    choiceD: "40,000",
    correctAnswer: "10,000",
  },
  {
    question: "What evolutionary adaptation helps birds fly?",
    questionImg: "https://cdn.pixabay.com/photo/2016/02/13/12/26/aurora-1197753_960_720.jpg",
    choiceA: "Rapid Digestion",
    choiceB: "Beaks",
    choiceC: "Hollow Bones",
    choiceD: "All of These",
    correctAnswer: "All of These",
  },
  {
    question:
      "Which of the following is not one of the four remaining subspecies of elk in North America?",
    questionImg: "https://cdn.pixabay.com/photo/2015/11/16/16/28/bird-1045954_960_720.jpg",
    choiceA: "Manitoba Elk",
    choiceB: "Highland Elk",
    choiceC: "Rocky Mountain Elk",
    choiceD: "Tule Elk",
    correctAnswer: "Highland Elk",
  },
  {
    question: "What is a baby elk called?",
    questionImg: "https://cdn.pixabay.com/photo/2010/12/13/10/05/berries-2277_960_720.jpg",
    choiceA: "Bull",
    choiceB: "Sow",
    choiceC: "Cow",
    choiceD: "Calf",
    correctAnswer: "Calf",
  },
  {
    question: "늑대들은 자신의 체취를 써서 뭘 하는가?",
    questionImg: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819_960_720.jpg",
    choiceA: "영역 표시",
    choiceB: "먹이찾기",
    choiceC: "망치기",
    choiceD: "딱히 아무것도?",
    correctAnswer: "영역 표시",
  },
  {
    question:
      "If a wolf trespasses on the territory of other wolves, what will happen?",
    questionImg: "https://cdn.pixabay.com/photo/2013/08/11/19/46/coffee-171653_960_720.jpg",
    choiceA: "Nothing",
    choiceB: "It will be accepted into the pack",
    choiceC: "It will be chased or killed",
    choiceD: "It will be required to present prey to the pack",
    correctAnswer: "It will be chased or killed",
  },
];

const lastQuestion = questions.length - 1;
let activeQuestion = 0;
const questionTime = 10; // 10 seconds
const gaugeWidth = 800; // 800px
const gaugeUnit = gaugeWidth / questionTime; // 80px
let count = 0;
let TIMER;
let score = 0;

// Start Button Event Listener
start.addEventListener("click", startQuiz);

// Answer choices Event Listeners
allAnswerChoices.forEach(function (clickAnswer) {
  clickAnswer.addEventListener("click", function (e) {
    let userAnswer = e.target.innerText;
    checkAnswer(userAnswer);
  });
});

//질문, 이미지 생성.
function renderQuestion() {
  let q = questions[activeQuestion];//활성화된 질문.
  question.innerHTML = "<p>" + q.question + "</p>";
  answerChoiceA.innerHTML = q.choiceA;
  answerChoiceB.innerHTML = q.choiceB;
  answerChoiceC.innerHTML = q.choiceC;
  answerChoiceD.innerHTML = q.choiceD;

  let bodyImg = `url('${q.questionImg}')`;//이미지 할당.
  document.body.style.backgroundImage = bodyImg;
}

// startQuiz Function
function startQuiz() {
  //게임 시작시 시작 버튼은 숨기고.
  //퀴즈는 보이게.
  start.style.display = "none";
  renderQuestion();
  quiz.style.visibility = "visible";
  renderProgress();
  renderCounter();
  TIMER = setInterval(renderCounter, 1000);
}

//진행률 생성
function renderProgress() {
  for (let questionIndex = 0; questionIndex <= lastQuestion; questionIndex++) {
    //질문 수만큼 반복 실행. 
    progressContainer.innerHTML +=
      "<div class='progress-box' id=" + questionIndex + "></div>";
  }
}

//시간 카운트
function renderCounter() {
  if (count <= questionTime) {
    counter.innerHTML = count;
    //전체 범위를 전체 시간으로 나눈값 == 시간의 단위값. 
    //거기에 시간 카운트를 곱함으로 진행률 표시.
    timeGauge.style.width = count * gaugeUnit + "px";
    count++;
  } else {
    //시간 초과시 틀림 처리.
    answerIsIncorrect();
    nextQuestion();
  }
}

//정답 확인
function checkAnswer(answer) {
  if (answer === questions[activeQuestion].correctAnswer) {
    score++;
    answerIsCorrect();
  } else {
    answerIsIncorrect();
  }
  nextQuestion();
}

//맞고 틀림.
function answerIsCorrect() {
  document.getElementById(activeQuestion).style.backgroundColor = "green";
}
function answerIsIncorrect() {
  document.getElementById(activeQuestion).style.backgroundColor = "red";
}

//다음 질문.
function nextQuestion() {
  count = 0;
  if (activeQuestion < lastQuestion) {
    activeQuestion++;
    renderQuestion();
  } else {
    clearInterval(TIMER);
    renderScore();
  }
}

function renderScore() {
  ScoreContainer.style.visibility = "visible";

  let scorePercentage = Math.round((100 * score) / questions.length);
  ScoreContainer.innerHTML = `<h2>Percentage of Correctly Answered Questions: ${scorePercentage}</h2>`;
  ScoreContainer.innerHTML += `<h2>Number of Correctly Answered Questions: ${score}</h2>`;
}