클릭 가능한 버튼을 사용하여 Jquery 객관식 퀴즈

Question

저는 Jquery에서 초보자입니다. 30 개가 넘는 질문으로 객관식 퀴즈를 만들고 싶습니다. 각 질문에는 클릭 가능한 CSS 버튼 4 개 (라디오 버튼 제외)에 4 개의 옵션이 지정됩니다. 사용자는 단 하나의 버튼을 클릭하여 선택합니다. 각 버튼은 클릭 기능에서 스크립트를 실행하고 클릭 한 버튼 (예 : 버튼 A)에 따라 메모리에있는 변수에 포인트가 지정되거나 포인트가 지정되지 않으면 새로운 일련의 질문이 자동으로 페이징됩니다. 이전 세트를 교체하십시오. 30 개의 질문이 끝나면 총 점수가 화면에 표시됩니다. CSS를 다시 작성하지 않고도 동일한 버튼 (A, B, C, D)을 화면에 표시하고 싶지만 각 버튼을 다른 올바른 또는 잘못된 스크립트로 다시 할당 할 수 있습니다 (예 : 이번에는 정확하고, 클릭하면, 1 점씩) 다음 뱅크의 질문과 그 새로운 뱅크에서의 대답을위한 올바른 버튼 선택에 따라 결정됩니다.

다른 질문이있는 30 개의 질문 모음을 html 파일에 쉽게 복사 할 수 있지만 올바른 단추를 클릭하지 않고도 한 단추에서 다른 단추로 코드를 전환하는보다 세련된 방법이 있어야합니다 너무 많은 줄을 사용하는 것.

Answer 1

항상 두 개의 배열을 사용할 수 있습니다. 하나는 올바른 코드와 잘못된 코드를 넣은 것이고 다른 하나는 2D 배열이며, 각 질문에 대해 각각의 대답에 대해 코드가있는 배열의 인덱스를 사용할 수 있습니다.

특정 질문에 도달하면 2D 배열의 해당 부분을 반복하고 각 대답에 코드를 첨부하십시오.

var codeArray = [notCorrect, correct]; // your functions you have defined, that are called when the answer is correct or not correct. 
var answerArray = [ 
    [1, 0, 0, 0], 
    [0, 1, 0, 0], 

    // ... etc ... 

    [1, 0, 0, 0], 
]; 

$('.button').click (function (event) { 
    // get questionNumber and answerNumber 
    codeArray[answerArray[questionNumber-1][answerNumber-1]](); // call the function, and mind the 0 indices! 
} 

---

편집, 더 많은 정보 : 예를 들어

는

배열은 다음과 같이 정의 할 수 있습니다 :

var myArray = [0, 1, 2, 3, 4, 5]; 

당신은 각각 어떤 값을 넣을 수 있습니다 '슬롯'. 내 예에서는 1과 0 만 사용하고 있습니다. 배열에서이 숫자에 액세스하려면 대괄호 ([])를 사용하십시오.

당신은 또한 codeArray 당신도이 같은 익명 함수, 줄 수있는 내 예제에서 배열로 기능을 (넣을 수 있습니다. 코드의

var codeArray = [function() { alert("Not correct"); }, function() { alert("Correct!"); }]; 

마지막 몇 줄은 .button 클릭의 클릭 핸들러 사용자가 클래스 button의 버튼을 클릭하면이 기능이 트리거됩니다.

이 내용을 이해하지 못한다면 도움이 되었기를 바랍니다. 약간의 JavaScript 책을 읽고 조금 더 교육을 받아보십시오.

Answer 2

또 다른 간단한 방법은 확인란에 자바 스크립트 속성을 추가하는 것입니다 ...

예 :

element.answer = true; 
... 
elements.filter(function(cb, index){  return cb.answer === true && cb.checked; });