Javascript [ Quiz ]

Quiz 배열 선언

const arr_quiz = [	// 배열
  {	// object
  	question : "문제1. ~~"	// 속성명 : 값(string)
  	,answer : {		// 속성명 : 값(object)
    // 주의. answer 은 객체이다. 배열X
  		A: "보기1"	// 값 속의 속성명 : 값
  		,B: "보기2"
  		,C: "보기3"
  		,D: "보기4"
	}
	,correct : C	
    // value 값으로 비교해주기 때문에 속성명과 동일해야 한다.
  }
  ,
  {
  	question : "문제2. ~~"	// 속성명 : 값(string)
  	,answer : {		// 속성명 : 값(object)
     // 주의. answer 은 객체이다. 배열X
  		1: "보기1"	// 값 속의 속성명 : 값
  		,2: "보기2"
  		,3: "보기3"
  		,4: "보기4"
      	,5: "보기5"
	}
	,correct : 3	
    // value 값으로 비교해주기 때문에 속성명과 동일해야 한다.
  }
];

---

Quiz 표현

• forEach(item,index) -> for~in( 보기의 개수가 다른 경우 )

let html = ``;
arr_quiz.forEach((item,index) => {
	html += `<p id="q${index}>${item.question}</p>`;
  	// q${index} 를 통해 id의 값이 문제별로 다르다.
  	html += `<ol>`;
  	// === 보기의 개수가 다른 경우 === //
  	for(let property_name in item.answer){
    	// item 은 question, answers, correct를 담고있는 객체	
      	// answer 의 개수 만큼 반복
      	html += `<li>
		   <label for="${index}${property_name}">
					${item.answers[property_name]}</label>
		   <input id="${index}${property_name}" type="radio"
				name = "question${index}" 
				value="${property_name}" />
		</li>`;
      /* label for 와 input id 를 ${index}${property_name}
      	으로 지정하는 이유
        - index 만 할 경우 고유하지 않아서 속성값도 같이 지정
      */
	  // label에서 answers아래의 속성값은 반드시 대괄호 표기법!
      
      /* input 에서 name을 question${index} 로 지정하는 이유
      	- 한 문제당 정답 하나를 고르기 위해
      */
      /* input 에서 value="${property_name}" 으로 지정하는 이유
      	- 선택한 답을 기억하기 위해
     */
    }	// end of for~in------------
  	html += `</ol>`;
  	html += `<div id=`ox${index}`></div>`;
  	// 각 문제별 정답유무 표시
});		// end of forEach--------------
document.querySelector("위치").innerHTML = html;

---

채점

• forEach(item,index)

let answer_cnt = 0;		// 정답개수 확인용
arr_quiz.forEach((item,index) => {
  	// === 정답 공개 (문제 뒤) === //
	const question
    	= document.querySelector(`p#q${index}`).innerHTML;
	
  	// 현 문제위치에 ( 기존 내용 + 답 )으로 덮어쓰기 	
  	document.querySelector(`p#q${index}`).innerHTML
   		= question + ` ${item.correct}`;
  	
============================================================
  	// === 보기 체크 유무 확인 === //
  	let radio_length	// 보기 개수
    	= document.querySelectorAll(`
					input[name="question${index}"]`).length;
  
  	let isCheckAnswer = false;
  	for(let i=0; i<radio_length; i++){
     	if(document.querySelectorAll(`
			input[name="question${index}"]`)[i].checked){
          // 보기가 체크되었다면
          isCheckAnswer = true;
          break;
        }
    }	// end of for-----------------
============================================================
  	// === 선택한 답 기억하기 === //
  	let user_answer;
  	if(isCheckAnswer){	// 보기가 체크되었다면
    	user_answer
        	= document.querySelector(`
			input[name="question${index}"]:checked`).value;
  		// ★★ 라디오 중 선택되어진 것 찾기 => :checked ★★
    }
    else{
        user_anser = "선택안함";
    }	// end of if~else--------------
============================================================
  	// === 선택한 답과 정답 비교 === //
  	if(user_answer == item.correct){
    	answer_cnt++;	// 정답개수 추가
      	document.querySelector(`div#ox${index}`).innerHTML
			= "정답"; 
    }
  	else{
      	document.querySelector(`div#ox${index}`).innerHTML
			= "오답"; 
    }	// end of if~else-----------
});		// end of forEach--------------------
============================================================
// === 정답 개수 표시 === //
document.querySelector("위치").innerHTML = `${answer_cnt}`;

---

정리

• 09javascriptStandardObject -> 02_Date
  -> 03타이머_객체배열을사용한객관식문제만들기.html, 03.css, 03.js