์๋ฐ์คํฌ๋ฆฝํธ : ํด์ฆ ํจ๊ณผ : ์ฌ๋ผ์ด๋ ํ์
์๋ฐ์คํฌ๋ฆฝํธ์ ๋ค์ํ ํจ๊ณผ๋ค ์ค, ํด์ฆ๋ฅผ ๋งํ ์ ์๋ ํด์ฆ ํจ๊ณผ์ ๋๋ค. ๊ทธ ์ค์์๋, ๊ฐ๊ด์ ์ ๋ต์ ์ ํํ๊ณ , '๋ค์ ๋ฌธ์ ' ๋ฒํผ์ ๋๋ฅด๋ฉด ๋ค์ ๋ฌธ์ ๋ก ์ด๋ํ๋ ์ฌ๋ผ์ด๋ ํ์์ผ๋ก ํด์ฆ๋ฅผ ์์ ํ์ต๋๋ค.
๊ฐ๊ด์(์ฌ๋ฌ ๋ฌธ์ ) ์ ํ : ์ฌ๋ผ์ด๋ ํ์
์์๋ ์น๋์์ธ๊ธฐ๋ฅ์ฌ์ ํ๊ธฐ ์ํ ๋ฌธ์ ์ ๋๋ค. ๋ฌธ์ ์ ์ ๋ต์ ๋งํ๋ฉด ๋ฌธ๊ตฌ๊ฐ ๋ํ๋๋ฉฐ ๊ฐ์์ง ์ ๋๋ฉ์ด์ ์ด ๊ธฐ๋ปํ๊ณ , ์ ๋ต์ ๋งํ์ง ๋ชปํ๋ฉด ์ฌํผํ๋ ์ ๋๋ฉ์ด์ ์ผ๋ก ์ ๋ ฅ๊ฐ์ ๋ฐ๋ผ ๋ค๋ฅธ ๊ฒฐ๊ณผ๊ฐ ๋ํ๋ฉ๋๋ค. ๋ฌธ์ ๋ฅผ ๋ค ํผ ๋ค '์ ๋ต ํ์ธํ๊ธฐ' ๋ฒํผ์ ํด๋ฆญํ๋ฉด ๋งํ ๋ฌธ์ ์ ๊ฐฏ์์ ์ ์, ํฉ/๋ถํฉ๊ฒฉ ์ฌ๋ถ๊ฐ ๋ํ๋ฉ๋๋ค.
// ๋ฌธ์ ์ ๋ณด
const quizInfo = [
{
answerType: "์น๋์์ธ๊ธฐ๋ฅ์ฌ 2013๋
01ํ",
answerNum: "6",
answerAsk: "์๋ก ๋ค๋ฅธ ์๋ผ๋ฆฌ์ ์ํฅ์ผ๋ก ์ธํ์ฌ ๋ฐ์ ์์ ๋ ๋ฐ๊ฒ ์ด๋์ด ์์ ๋ ์ด๋ก๊ฒ ๋ณด์ด๋ ๋๋น๋?",
answerChoice: [
"์์๋๋น",
"๋ช
๋๋๋น",
"์ฑ๋๋๋น",
"๊ณ์๋๋น"
],
answerResult: "๋ช
๋๋๋น",
answerEx: "์ด๋ก๊ณ ๋ฐ๋ค๋ผ๋ ์ธ๊ธ์ ๋ช
๋๋ฅผ ์์ฌํ์
์ผ ๋ฉ๋๋ค."
},
{
answerType: "์น๋์์ธ๊ธฐ๋ฅ์ฌ 2013๋
01ํ",
answerNum: "7",
answerAsk: "๋์์ธ ์๋ฆฌ ์ค ์จ๋(Rhythm)์ ํด๋นํ์ง ์๋ ๊ฒ์?",
answerChoice: [
"๋น๋ก",
"๋ฐ๋ณต",
"๊ฐ์กฐ",
"์ ์ด"
],
answerResult: "๋น๋ก",
answerEx: "์จ๋์ ํจ๊ณผ๋ ๊ฐํ ํ๊ณผ ์ฝํ ํ์ด '๊ท์น์ '์ผ๋ก ์๊ฒจ๋๋ '์์ง์' ์
๋๋ค. ๋น๋ก๋์ ์๊ด์์ต๋๋ค."
},
{
answerType: "์น๋์์ธ๊ธฐ๋ฅ์ฌ 2013๋
01ํ",
answerNum: "8",
answerAsk: "์ด๋ ์ด ์์๋ ๋ ๋ฌผ์ฒด์ ์์ด ํ๋ฆฌ๊ฒ ๋ํ๋๋ ํ์๊ณผ ๊ฐ์ฅ ๊ด๊ณ๊ฐ ๊น์ ๊ฒ์?",
answerChoice: [
"์์์",
"ํธ๋ฅดํจ์ ํ์",
"๋ฐ๋ช
์",
"์กฐ๊ฑด๋ฑ์"
],
answerResult: "๋ฐ๋ช
์",
answerEx: "๋ช
์์์ ์ด๋์ด -> ๋ฐ์๊ณณ ๊ฐ ๋ ๋์ ์ ์ ์์์์ ๋ฐ์ -> ์ด๋์ด ๊ณณ ๊ฐ ๋ ๋์ ์ ์์
๋๋ค. ๋ฐ๋ช
์๋ ๊ทธ ์ค๊ฐ์ ๋์ ์ ์์
๋๋ค. ๊ทธ ์ํ์์ ๋ฌผ์ฒด๊ฐ ํ๋ฆฌ๊ฒ ๋ณด์ฌ์"
},
{
answerType: "์น๋์์ธ ๊ธฐ๋ฅ์ฌ 2013๋
01ํ",
answerNum: 11,
answerAsk: "์คํํธ(spot) ๊ด๊ณ ์ ๋ํ ์ค๋ช
์ด ์ณ์ ๊ฒ์?",
answerChoice: [
"์ ๊ตญ ๋ฐฉ์ก๋ง์ผ๋ก ๋ฐฉ์ก๊ตญ์์ ์ ๊ตญ์ ์ค์ํ๋ ๊ด๊ณ ",
"์ผ์ ์๊ฐ์ ์ ํด 30์ด CM 10๊ฐ๋ฅผ ๊ณ์ ๋ฐฉ์กํ๋ ํํ",
"์ง์ญ ๋ฐฉ์ก๊ตญ์ ์ ํ๋์ด ๋ฐฉ์กํ๋ ๊ฒ",
"ํ๋ก๊ทธ๋จ๊ณผ ํ๋ก๊ทธ๋จ ์ฌ์ด์ ๊ด๊ณ ๋ฅผ ์ฝ์
ํ๋ ๊ฒ",
],
answerResult: "ํ๋ก๊ทธ๋จ๊ณผ ํ๋ก๊ทธ๋จ ์ฌ์ด์ ๊ด๊ณ ๋ฅผ ์ฝ์
ํ๋ ๊ฒ",
answerEx: "๊ธฐ์ตํด์ฃผ์ธ์ spot ๊ด๊ณ ๋ '๋ผ๋์ค๋ ํ
๋ ๋น์ ๋ฐฉ์ก์์, ํ๋ก๊ทธ๋จ ์ฌ์ด ๋๋ ํ๋ก๊ทธ๋จ ์งํ ์ค์ ์์ฃผ ์งง๊ฒ ๋๊ฐ๋ ๊ด๊ณ ' ์
๋๋ค.",
},
{
answerType: "์น๋์์ธ ๊ธฐ๋ฅ์ฌ 2013๋
01ํ",
answerNum: 15,
answerAsk: "๋ค์ ์ค ๊ตฟ ๋์์ธ(Good Design)์ ์กฐ๊ฑด์ด ์๋ ๊ฒ์?",
answerChoice: [
"์ฌ๋ฏธ์ฑ",
"๋
์ฐฝ์ฑ",
"๋์ค์ฑ",
"๊ฒฝ์ ์ฑ",
],
answerResult: "๋์ค์ฑ",
answerEx: "๊ตฟ๋์์ธ 4๊ฐ์ง ์ธ์ฐ์ธ์ : ์ฌ๋ฏธ์ฑ, ๋
์ฐฝ์ฑ, ํฉ๋ชฉ์ ์ฑ, ๊ฒฝ์ ์ฑ ์
๋๋ค.",
}
]
const quizType = document.querySelector(".quiz__type") // ํด์ฆ ์ ํ
const quizQuestion = document.querySelector(".quiz__question"); // ๋ฌธ์ ๋ฒํธ, ์ง๋ฌธ
const quizSelects = document.querySelector(".quiz__selects") // ๊ฐ๊ด์ ๋ณด๊ธฐ
const quizResult = document.querySelector(".quiz__answer .result") // ํด์ฆ ํด์ค
const quizConfirm = document.querySelector(".quiz__answer .confirm") // ์ ๋ต ํ์ธ ๋ฒํผ
const quizView = document.querySelector(".quiz__view") // ๊ฐ์์ง
let quizCount = 0;
let quizScore = 0; // ๋งํ ๋ฌธ์ ๊ฐฏ์
const updateQuiz = (index) => { // ํด์ฆ ์ ํ, ๋ฌธ์ , ๋ณด๊ธฐ ์์ผ๋ก ํ
ํ๋ฆฟ ๋ฌธ์์ด์ ํ์ฉํด ๊ฐ๊ฐ์ ๋ฌธ์ ๋ฅผ ์ฝ์
ํ์ต๋๋ค.
const quizTag = `
<div>${quizInfo[index].answerType}</div>
`;
const questionTag = `
<span class="number">${quizInfo[index].answerNum}. </span>
<div class="ask">${quizInfo[index].answerAsk}</div>
`;
const choiceTag = `
<label for="select1">
<input type="radio" class="select" id="select1" name="select" value="1">
<span class="choice">${quizInfo[index].answerChoice[0]}</span>
</label>
<label for="select2">
<input type="radio" class="select" id="select2" name="select" value="2">
<span class="choice">${quizInfo[index].answerChoice[1]}</span>
</label>
<label for="select3">
<input type="radio" class="select" id="select3" name="select" value="3">
<span class="choice">${quizInfo[index].answerChoice[2]}</span>
</label>
<label for="select4">
<input type="radio" class="select" id="select4" name="select" value="4">
<span class="choice">${quizInfo[index].answerChoice[3]}</span>
</label>
`;
// ๋ฌธ์ ์ถ๋ ฅ
quizType.innerHTML = quizInfo[index].answerType; // ํด์ฆ ์ ํ
quizQuestion.innerHTML = questionTag; // ๋ฒํธ, ์ง๋ฌธ
quizSelects.innerHTML = choiceTag; // ๋ณด๊ธฐ
quizResult.innerHTML = quizInfo[index].answerEx; // ํด์ฆ ํด์ค
const quizChoice = quizSelects.querySelectorAll(".choice");
for(let i=0; i<quizChoice.length; i++){
quizChoice[i].setAttribute("onclick", "choiceSelected(this)")
}
// ๋ฌธ์ , ํด์ค ์จ๊ธฐ๊ธฐ
quizResult.style.display = "none";
quizConfirm.style.display = "none";
}
updateQuiz(quizCount);
const choiceSelected = (answer) => {
let userAnswer = answer.textContent; // ์ฌ์ฉ์๊ฐ ์ฒดํฌํ ์ ๋ต
let currentAnswer = quizInfo[quizCount].answerResult; // ๋ฌธ์ ์ ์ ๋ต
if(userAnswer == currentAnswer){
quizView.classList.add("like");
quizScore++;
} else {
quizView.classList.add("dislike");
quizResult.style.display = "block";
}
quizConfirm.style.display = "block";
}
// ์ ๋ต ํ์ธ ๋ฒํผ
const answerQuiz = () => {
totalScore = quizScore * 100 / quizInfo.length; // ์ ์ ๊ณ์ฐํ๊ธฐ
if(quizInfo.length -1 == quizCount){
if(totalScore >= 60){
quizConfirm.textContent = `์ด ${quizInfo.length}๋ฌธ์ ์ค์ ${quizScore}๋ฌธ์ ๋ฅผ ๋งํ์ต๋๋ค. ${totalScore}์ ์
๋๋ค. ํฉ๊ฒฉ์
๋๋ค!`
} else {
quizConfirm.textContent = `์ด ${quizInfo.length}๋ฌธ์ ์ค์ ${quizScore}๋ฌธ์ ๋ฅผ ๋งํ์ต๋๋ค. ${totalScore}์ ์
๋๋ค. ๋ถํฉ๊ฒฉ์
๋๋ค.`
}
}
quizCount++;
updateQuiz(quizCount);
quizView.classList.remove("like", "dislike");
// ๋ง์ง๋ง ๋ฌธ์
}
quizConfirm.addEventListener("click", answerQuiz);
๋๊ธ