오늘은 팀프로젝트에 필요한 퀴즈 효과를 다시 한 번 복습해보겠습니다.
오랜만에 하려니 너무 어렵더군요 ㅠ
퀴즈 효과
html 퀴즈 문제 구조
<div class="question__conts mt30">
<div class="question__quiz">
<!-- <div class="quiz">
<div class="quiz__problem">17. 윗글을 바탕으로 할 때 ㄱ의 답으로 적절하지 않은 것은?</div>
<div class="quiz__desc hide"></div>
<div class="quiz__selects">
<input type="radio" id="select1">
<label for="select1"><span>인류의 지혜와 경험을 배우기 위해</span></label>
<input type="radio" id="select2">
<label for="select2"><span>현실로부터 도피할 방법을 구하기 위해</span></label>
<input type="radio" id="select3">
<label for="select3"><span>시대적 과제를 해결할 실마리를 찾기 위해</span></label>
<input type="radio" id="select4">
<label for="select4"><span>자신의 삶에 대해 숙고할 시간을 갖기 위해</span></label>
<input type="radio" id="select5">
<label for="select5"><span>세상에 대한 안목을 키우는 지식을 얻기 위해</span></label>
</div>
</div> -->
</div>
</div>원래 문제가 들어가는 곳의 구조를 짜고, 주석처리를 해주었습니다. 스크립트에서 push와 join을 이용해 작업하기 위해 주석처리를 해줍니다.
json파일 만들기
[
{
"question": "윗글을 바탕으로 할 때 ㄱ의 답으로 적절하지 않은 것은?",
"correct_answer": "인류의 지혜와 경험을 배우기 위해",
"incorrect_answers": [
"현실로부터 도피할 방법을 구하기 위해",
"세상에 대한 안목을 키우는 지식을 얻기 위해",
"시대적 과제를 해결할 실마리를 찾기 위해",
"자신의 삶에 대해 숙고할 시간을 갖기 위해"
]
},{
"question": "다음은 윗글을 읽은 학생의 독서 기록장 일부이다 이에 대한 설명으로 가장 적절한 것은?",
"ques_desc": "나의 독서 대부분은 정보 습득을 위한 것이었다 책의 내용이 그대로 내 머릿속으로 옮겨져 지식이 쌓이기만을 바랐지 내면의 성장을 생각하지 못했다. 윤동주 평전을 읽으며 스스로에게 질문을 던지는 이 시간이 나에 대해 사색하며 삶을 가꾸는 소중한 시간임을 새삼 느낀다 오. 늘 나는 책장을 천천히 넘기며 나에게로의 여행을 떠나 보려 한다",
"correct_answer": "문제에 대한 여러 관점을 다각도로 검토하고, 비판적 판단 을 유보함으로써 자신의 관점이 지닌 타당성을 견고히 해야 겠군.",
"incorrect_answers": [
"읽을 책을 선택하기 전에 해결하려는 문제가 무엇인지를 명확하게 인식해야겠군.",
"서로 다른 관점을 비교·대조하면서 검토함으로써 편협한 시각에서 벗어나 문제를 폭넓게 보아야겠군.",
"문제의 해결을 위해 서로 다른 관점을 비판적으로 통합하여 문제에 대한 생각을 새롭게 구성할 수 있어야겠군.",
"정보를 이해하는 수준을 넘어 각 관점의 타당성을 , 검토하 고 평가 내용을 통합함으로써 문제를 깊이 이해해야겠군"
]
},{
"question": " < 보기 > 는 과 같이 독서하기 위해 학생이 찾은 독서 방법이 ㉡ 다 이에 대한 반응으로 적절하지 않은 것은 ?",
"ques_desc": "해결하려는 문제와 관련하여 관점이 다른 책들을 함께 읽는 것은 해법을 찾는 한 방법이다. 문제가 무엇인 지를 명확히 하고 이와 관련된 서로 다른 관점의 책을 찾 는다 책을 읽을 때는 자신의 관점에서 각 관점들을 비 교·대조하면서 정보의 타당성을 비판적으로 검토하고 평 가한 내용을 통합한다 이를 통해 문제를 다각적 . 심층적 으로 이해하게 됨으로써 자신의 관점을 분명히 하고, 나아 가 생각을 발전시켜 관점을 재구성하게 됨으로써 해법을 찾을 수 있다.",
"correct_answer": "문학 분야에 편중되었던 독서 습관을 버리고 다양한 분야의 책을 읽으려는 노력을 보이고 있다.",
"incorrect_answers": [
"삶을 성찰하게 하는 독서의 가치를 깨닫고 이를 실천하려는 모습을 보이고 있다.",
"독서를 지속적으로 실천하지 못한 태도를 반성하고 문제 해 결을 위해 장기적인 독서 계획을 세우고 있다.",
"내면적 성장을 위한 도구로서의 독서의 중요성을 인식하고 다양한 매체를 활용한 독서의 방법을 제안하고 있다.",
"개인의 지적 성장에 머무는 독서의 한계를 지적하고 타인과 경험을 공유하는 독서 토론의 필요성을 강조하고 있다."
]
}
]제이슨 파일을 예시로 만들었습니다.
스크립트
// 선택자
const questionQuiz = document.querySelector(".question__quiz");
const questionSubmit = document.querySelector(".question__submit");
let questionAll = []; // 모든 퀴즈 정보
const dataQuestion = () => {
fetch("json/ex1.json")
.then(res => res.json())
.then(items => {
questionAll = items.map((item, index) => {
const formattedQuestion = {
question: item.question,
number: index + 1
}
const answerChoices = [...item.incorrect_answers]; //오답 불러오기
formattedQuestion.answer = Math.round(Math.random() * answerChoices.length) + 1;
answerChoices.splice(formattedQuestion.answer - 1, 0, item.correct_answer);
//보기를 추가
answerChoices.forEach((choice, index) => {
formattedQuestion["choice" + (index+1)] = choice;
});
//문제에 대한 해설이 있으면 출력
if(item.hasOwnProperty("ques_desc")){
formattedQuestion.ques_desc = item.ques_desc;
}
return formattedQuestion;
});
newQuestion(); //문제 만들기
})
.catch((err) => console.log(err));
}
const newQuestion = () => {
const exam = [];
const omr = [];
questionAll.forEach((question, number) => {
exam.push(`
<div class="quiz">
<div class="quiz__problem"><span>${question.number}</span>. ${question.question}</div>
<div class="quiz__desc">${question.ques_desc}</div>
<div class="quiz__selects">
<input type="radio" id="select${number}_1" name="select${number}" value="${number}_1">
<label for="select${number}_1"><span>${question.choice1}</span></label>
<input type="radio" id="select${number}_2" name="select${number}" value="${number}_2">
<label for="select${number}_2"><span>${question.choice2}</span></label>
<input type="radio" id="select${number}_3" name="select${number}" value="${number}_3">
<label for="select${number}_3"><span>${question.choice3}</span></label>
<input type="radio" id="select${number}_4" name="select${number}" value="${number}_4">
<label for="select${number}_4"><span>${question.choice4}</span></label>
<input type="radio" id="select${number}_5" name="select${number}" value="${number}_5">
<label for="select${number}_5"><span>${question.choice5}</span></label>
</div>
</div>
`);
});
questionQuiz.innerHTML = exam.join('');
// 문제 설명 없는 곳 제거
document.querySelectorAll(".ques_desc").forEach(desc => {
if(ques_desc.innerText === "undefined"){
ques_desc.classList.add("hide");
}
});
}
dataQuestion();document.querySelector(".question__quiz")는 question__quiz 클래스를 가진 요소를 선택하고, document.querySelector(".question__submit")는 question__submit 클래스를 가진 요소를 선택합니다.
dataQuestion() 함수는 fetch() 함수를 사용하여 지정된 JSON 파일에서 데이터를 가져옵니다. then() 함수를 사용하여 가져온 데이터를 처리하고 questionAll 배열에 저장합니다. 이 함수는 newQuestion() 함수를 호출하여 HTML 요소를 동적으로 생성합니다.
newQuestion() 함수는 questionAll 배열의 각 요소에 대해 HTML 요소를 생성합니다. 이 함수는 배열을 반복하며, exam 배열에 퀴즈 문제의 HTML을 추가합니다. 각 문제는 div 요소로 구성되며, 문제 번호, 문제 내용, 보기, 해설 등이 포함됩니다. 이 함수는 HTML의 innerHTML 속성을 사용하여 exam 배열의 내용을 HTML 문서에 삽입합니다.
마지막으로, document.querySelectorAll(".ques_desc")를 사용하여 모든 ques_desc 클래스를 가진 요소를 선택하고, 이를 반복하여 각 요소에 대해 조건문을 실행합니다. 해당 요소의 텍스트가 "undefined"이면 해당 요소에 hide 클래스를 추가합니다. 이로 인해 문제 설명이 없는 퀴즈는 표시되지 않습니다.
마지막으로, dataQuestion() 함수가 호출되어 코드가 실행됩니다.
728x90
반응형
