์๋ฐ์คํฌ๋ฆฝํธ : ํด์ฆ ํจ๊ณผ : ์น๋์์ธ๊ธฐ๋ฅ์ฌ 2015๋ 2ํ ๊ธฐ์ถ ๋ฌธ์
์๋ฐ์คํฌ๋ฆฝํธ์ ๋ค์ํ ํจ๊ณผ๋ค ์ค, ํด์ฆ๋ฅผ ๋งํ ์ ์๋ ํด์ฆ ํจ๊ณผ์ ๋๋ค. ๊ทธ ์ค์์๋, ์ฌ๋ฌ ๊ฐ์ ๋ฌธ์ ์ ๊ฐ๊ด์ ์ ๋ต์ ์ ํํ๋ ํด์ฆ ์ ํ์ ์์ ํด ๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
๊ฐ๊ด์(์ฌ๋ฌ ๋ฌธ์ ) ์ ํ
์์๋ ์น๋์์ธ๊ธฐ๋ฅ์ฌ์ ํ๊ธฐ ์ํ ๋ฌธ์ ์ ๋๋ค. ๋ฌธ์ ์ ์ ๋ต์ ๋งํ๋ฉด ๋ฌธ๊ตฌ๊ฐ ๋ํ๋๋ฉฐ ๊ฐ์์ง ์ ๋๋ฉ์ด์ ์ด ๊ธฐ๋ปํ๊ณ , ์ ๋ต์ ๋งํ์ง ๋ชปํ๋ฉด ์ฌํผํ๋ ์ ๋๋ฉ์ด์ ์ผ๋ก ์ ๋ ฅ๊ฐ์ ๋ฐ๋ผ ๋ค๋ฅธ ๊ฒฐ๊ณผ๊ฐ ๋ํ๋ฉ๋๋ค. ๋ฌธ์ ๋ฅผ ๋ค ํผ ๋ค '์ ๋ต ํ์ธํ๊ธฐ' ๋ฒํผ์ ํด๋ฆญํ๋ฉด ๋งํ ๋ฌธ์ ์ ๊ฐฏ์์ ์ ์, ํฉ/๋ถํฉ๊ฒฉ ์ฌ๋ถ๊ฐ ๋ํ๋ฉ๋๋ค.
// ๋ฌธ์ ์ ๋ณด : ๋ฐฐ์ด ์์ ๊ฐ์ฒด๋ฅผ ๋ฃ์ ํํ๋ก ๊ฐ ๋ฌธ์ ๋ฅผ ์์ฑํ์ต๋๋ค.
const quizInfo = [
{
answerType: "์น๋์์ธ๊ธฐ๋ฅ์ฌ 2015๋
2ํ",
answerNum: "1",
answerAsk: "์ผ๋ฐ์ ์ผ๋ก ํ๊ฒฝ ๋์์ธ์ ์ข
๋ฅ์ ํด๋นํ๋ ๊ฒ์?",
answerChoice: {
1: "๊ฐ์ ์ ํ ๋์์ธ",
2: "์คํธ๋ฆฌํธ ํผ๋์ฒ ๋์์ธ",
3: "๊ธฐ์
์ด๋ฏธ์ง ๋์์ธ",
4: "์บ๋ฆฐ๋ ๋์์ธ"
},
answerResult: "2",
answerEx: "ํ๊ฒฝ ๋์์ธ์ ์ข
๋ฅ์๋ ์ธํ
๋ฆฌ์ด ๋์์ธ, ๋์คํ๋ ์ด ๋์์ธ, ์คํธ๋ฆฌํธ ํผ๋์ณ ๋์์ธ, ๋ฌด๋ ๋์์ธ ๋ฑ์ด ์์ต๋๋ค."
},
{
answerType: "์น๋์์ธ๊ธฐ๋ฅ์ฌ 2015๋
2ํ",
answerNum: "2",
answerAsk: "๋์์ธ์ ์๋ฆฌ์์ ์จ๋์ ํด๋น๋๋ ๊ฒ์?",
answerChoice: {
1: "์ ์ฌ, ๋๋น",
2: "๋์นญ, ๋น๋ก",
3: "ํต์ผ, ๋ณํ",
4: "์ ์ด, ๋ฐ๋ณต"
},
answerResult: "4",
answerEx: "์จ๋์ ์๋ฆฌ๋ ๋ฐ๋ณต๊ณผ ๊ต์ฐจ, ์ ์ด(์ ์ฆ), ๋ฐฉ์ฌ๊ฐ ์์ต๋๋ค."
},
{
answerType: "์น๋์์ธ๊ธฐ๋ฅ์ฌ 2015๋
2ํ",
answerNum: "3",
answerAsk: "๋ถํฌ๋ช
ํ ๋ฌผ์ฒด๊ฐ ๋น์ ๋ฐ์ฌ์ํด์ผ๋ก์จ ๋ํ๋๋ ๋ฌผ์ฒด์ ์์ ์๋ฏธํ๋ ๊ฒ์?",
answerChoice: {
1: "๊ด์์",
2: "์กฐ๋ช
์",
3: "๊ฒฝ์์",
4: "ํ๋ฉด์"
},
answerResult: "4",
answerEx: "๋ถํฌ๋ช
ํ ๋ฌผ์ฒด๊ฐ ๋น์ ๋ฐ์ฌ์ํด์ผ๋ก์จ ๋ํ๋๋ ๋ฌผ์ฒด์ ์์ ์๋ฏธํ๋ ๊ฒ์ ํ๋ฉด์์
๋๋ค."
},
{
answerType: "์น๋์์ธ๊ธฐ๋ฅ์ฌ 2015๋
2ํ",
answerNum: "4",
answerAsk: "๋ถ๋ถ๊ณผ ๋ถ๋ถ ๋๋ ๋ถ๋ถ๊ณผ ์ ์ฒด ์ฌ์ด์ ์์ ๋ ๊ด๋ จ์ฑ์ ์ง๋๋ฉฐ ์๋ก ํจ๊ป ์ํด์๋ ๊ฒ์ฒ๋ผ ๋ณด์ด๋ ๋์์ธ ์๋ฆฌ๋?",
answerChoice: {
1: "๋น๋ก",
2: "์กฐํ",
3: "๊ท ํ",
4: "๊ฐ์กฐ"
},
answerResult: "2",
answerEx: "๋ถ๋ถ๊ณผ ๋ถ๋ถ ๋๋ ๋ถ๋ถ๊ณผ ์ ์ฒด ์ฌ์ด์ ์์ ๋ ๊ด๋ จ์ฑ์ ์ง๋๋ฉฐ ์๋ก ํจ๊ป ์ํด์๋ ๊ฒ์ฒ๋ผ ๋ณด์ด๋ ๋์์ธ ์๋ฆฌ๋ ์กฐํ์
๋๋ค."
},
{
answerType: "์น๋์์ธ๊ธฐ๋ฅ์ฌ 2015๋
2ํ",
answerNum: "5",
answerAsk: "์ ์ธ ์์ ํฌ๊ธฐ๊ฐ ๋ค๋ฅธ ์์ด ๋ ๊ฐ ์๊ณ , ํฌ๊ธฐ๊ฐ ํฐ ์ ์ชฝ์ผ๋ก ์ ์ธ์ด ๊ธฐ์ธ์ด์ ธ ์๋ ํ์๊ณผ ๊ด๋ จ๋ ๋์์ธ ์๋ฆฌ๋?",
answerChoice: {
1: "์กฐํ",
2: "๊ฐ์กฐ",
3: "์จ๋",
4: "๋น๋์นญ"
},
answerResult: "4",
answerEx: "๋ ๊ฐ์ ๊ณต์ด ๋์นญ์ ์ด๋ฃจ์ง ๋ชปํ๊ณ ์๋ ํ์์
๋๋ค."
}
// ๋ธ๋ก๊ทธ์๋ ์คํฌ๋กค ์๋ฐ์ ๋ฐฉ์งํ๊ธฐ ์ํด ๋ค์ฏ ๋ฌธ์ ์ ์คํฌ๋ฆฝํธ๋ง ์ฒจ๋ถํ์์ต๋๋ค.
]
// ์ ํ์
const quizWrap = document.querySelector(".quiz__wrap");
let quizScore = ""; // ์ ๋ต ์ (๊ฐ์ด ๋ณํ๋ฏ๋ก let์ผ๋ก ์ ์ธ)
const updateQuiz = () => {
const exam = [];
// ๋ฐฐ์ด exam ์์ push() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ํด์ฆ ๋ฐ์ค 60๊ฐ๋ฅผ ๋ง๋ค์ด ์ฃผ์์ต๋๋ค.
quizInfo.forEach((question, number) => {
exam.push(`
<div class="quiz">
<span class="quiz__type">${question.answerType}</span>
<h2 class="quiz__question">
<span class="number">${question.answerNum}. </span>
<div class="ask">${question.answerAsk}</div>
</h2>
<div class="quiz__view">
<div class="true">์ ๋ต์
๋๋ค!</div>
<div class="false">์ค๋ต์
๋๋ค!</div>
<div class="dog">
<div class="head">
<div class="ears"></div>
<div class="face"></div>
<div class="eyes">
<div class="teardrop"></div>
</div>
<div class="nose"></div>
<div class="mouth">
<div class="tongue"></div>
</div>
<div class="chin"></div>
</div>
<div class="body">
<div class="tail"></div>
<div class="legs"></div>
</div>
</div>
</div>
<div class="quiz__answer">
<div class="quiz__selects">
<label for="select1${number}">
<input type="radio" class="select" id="select1${number}" name="select${number}" value="1">
<span class="choice">${question.answerChoice[1]}</span>
</label>
<label for="select2${number}">
<input type="radio" class="select" id="select2${number}" name="select${number}" value="2">
<span class="choice">${question.answerChoice[2]}</span>
</label>
<label for="select3${number}">
<input type="radio" class="select" id="select3${number}" name="select${number}" value="3">
<span class="choice">${question.answerChoice[3]}</span>
</label>
<label for="select4${number}">
<input type="radio" class="select" id="select4${number}" name="select${number}" value="4">
<span class="choice">${question.answerChoice[4]}</span>
</label>
</div>
</div>
</div>
`);
})
// ๋ฌธ์ ์ถ๋ ฅ
exam.push(`
<div class="quiz__confirm">
<button class="check">์ ๋ต ํ์ธํ๊ธฐ</button>
<div class="ex"></div>
</div>
`)
quizWrap.innerHTML = exam.join(''); // join() ๋ฉ์๋๋ก ๋ฐฐ์ด์ ์๊ธฐ๋ ,๋ฅผ ์ ๊ฑฐํด ์ค๋๋ค.
}
updateQuiz();
// ์ ๋ต ํ์ธ
const answerQuiz = () => {
const quizSelects = document.querySelectorAll(".quiz__selects");
// ์ฌ์ฉ์๊ฐ ์ฒดํฌํ ๋ณด๊ธฐ์ ๋ฌธ์ ์ ๋ต ๋น๊ต
quizInfo.forEach((question, number) => {
const userSelector = `input[name=select${number}]:checked`; // ์ฌ์ฉ์๊ฐ ์ฒดํฌํ ๊ฒ
const quizSelectsWrap = quizSelects[number];
const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value;
const quizView = document.querySelectorAll(".quiz__view"); // ๊ฐ์์ง
if(userAnswer == question.answerResult){
quizView[number].classList.add("like");
quizScore++; // ๋ฌธ์ ๋ฅผ ๋งํ ๊ฐฏ์
} else {
quizView[number].classList.add("dislike");
const divBox = document.createElement("div") // ์๋ฐ์คํฌ๋ฆฝํธ๋ก ํ๊ทธ ์์ฑํ๋ ๋ฐฉ๋ฒ
quizSelectsWrap.appendChild(divBox).innerHTML = `<p class="result">${question.answerEx}</p>`
// appendChild : divBox๋ฅผ ์์์ผ๋ก ๋ฃ์
}
});
let totalScore = quizScore / quizInfo.length * 100; // ์ ์ ๊ณ์ฐ
if(totalScore >= 60){
document.querySelector(".ex").innerHTML = `${quizInfo.length} ๋ฌธ์ ์ค ${quizScore}๊ฐ ๋งํ์
จ์ต๋๋ค. ์ ์๋ ${totalScore}์ ์
๋๋ค. ํฉ๊ฒฉ์
๋๋ค!`
} else {
document.querySelector(".ex").innerHTML = `${quizInfo.length} ๋ฌธ์ ์ค ${quizScore}๊ฐ ๋งํ์
จ์ต๋๋ค. ์ ์๋${totalScore}์ ์
๋๋ค. ๋ถํฉ๊ฒฉ์
๋๋ค.`
}
}
// ์ ๋ต ํด๋ฆญ
document.querySelector(".quiz__confirm .check").addEventListener("click", answerQuiz) // ์ ๋ต์ ํด๋ฆญํ๋ฉด answerQuiz๋ฅผ ์คํ
'Javascript Effect' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
์๋ฐ์คํฌ๋ฆฝํธ ์ฌ๋ผ์ด๋ ํจ๊ณผ : transition (8) | 2022.08.29 |
---|---|
์๋ฐ์คํฌ๋ฆฝํธ ํด์ฆ ํจ๊ณผ : ๊ฐ๊ด์(์ฌ๋ฌ ๋ฌธ์ ์ ํ) : ์ฌ๋ผ์ด๋ ํ์ (11) | 2022.08.24 |
์๋ฐ์คํฌ๋ฆฝํธ ๊ฒ์ ํจ๊ณผ : charAt() (9) | 2022.08.22 |
์๋ฐ์คํฌ๋ฆฝํธ ๊ฒ์ ํจ๊ณผ : includes() (4) | 2022.08.17 |
์๋ฐ์คํฌ๋ฆฝํธ ๊ฒ์ ํจ๊ณผ : indexOf() (5) | 2022.08.17 |
๋๊ธ