자바스크립트에서 JSON 데이터를 이용하여 시험지 생성하기

15 Sep 2023

javascript

개요

이번 글에서는 자바스크립트를 사용하여 JSON 데이터를 활용하여 동적으로 시험지를 생성하는 방법에 대해 알아보겠습니다.

JSON 데이터 구조

시험지를 생성하기 위해 사용할 JSON 데이터 구조는 다음과 같습니다.

{
  "title": "시험지 제목",
  "questions": [
    {
      "question": "질문 내용",
      "choices": [
        "선택지 1",
        "선택지 2",
        "선택지 3"
      ],
      "correctChoiceIndex": 1
    },
    {
      "question": "질문 내용",
      "choices": [
        "선택지 1",
        "선택지 2",
        "선택지 3"
      ],
      "correctChoiceIndex": 2
    }
  ]
}

시험지는 “title” 속성으로 제목을 가지고 있으며, “questions” 배열 안에 여러 개의 질문이 포함되어 있습니다. 각 질문은 “question” 속성으로 질문 내용을, “choices” 배열로 선택지를, “correctChoiceIndex” 속성으로 정답 선택지의 인덱스를 가지고 있습니다.

시험지를 생성하는 자바스크립트 코드

JSON 데이터를 기반으로 시험지를 동적으로 생성하는 자바스크립트 코드는 다음과 같습니다.

// JSON 데이터
var jsonData = {
  "title": "시험지 제목",
  "questions": [
    {
      "question": "질문 내용",
      "choices": [
        "선택지 1",
        "선택지 2",
        "선택지 3"
      ],
      "correctChoiceIndex": 1
    },
    {
      "question": "질문 내용",
      "choices": [
        "선택지 1",
        "선택지 2",
        "선택지 3"
      ],
      "correctChoiceIndex": 2
    }
  ]
};

// 시험지 생성 함수
function generateQuiz(jsonData) {
  // 시험지 제목 추가
  var quizTitle = document.createElement("h1");
  quizTitle.textContent = jsonData.title;
  document.body.appendChild(quizTitle);

  // 질문 추가
  jsonData.questions.forEach(function(questionData) {
    var questionWrapper = document.createElement("div");
    questionWrapper.classList.add("question");

    var questionText = document.createElement("p");
    questionText.textContent = questionData.question;
    questionWrapper.appendChild(questionText);

    // 선택지 추가
    questionData.choices.forEach(function(choice, index) {
      var choiceLabel = document.createElement("label");
      var choiceRadio = document.createElement("input");
      choiceRadio.type = "radio";
      choiceRadio.name = "question" + questionData.index;
      choiceRadio.value = index;

      choiceLabel.appendChild(choiceRadio);
      choiceLabel.appendChild(document.createTextNode(choice));
      questionWrapper.appendChild(choiceLabel);
    });

    document.body.appendChild(questionWrapper);
  });
}

// 시험지 생성 함수 호출
generateQuiz(jsonData);

위의 코드에서는 generateQuiz 함수를 통해 JSON 데이터를 받아와 시험지를 생성합니다. 시험지 제목과 질문, 선택지를 동적으로 생성하여 HTML에 추가하고, 사용자가 선택한 답안을 처리하는 기능은 추가하지 않았습니다.

결론

JSON 데이터를 활용하여 자바스크립트로 동적으로 시험지를 생성할 수 있는 방법에 대해 알아보았습니다. 이를 기반으로 시험지 생성 로직을 확장하거나 사용자의 응답을 처리하는 기능을 추가하여 학습자들에게 유용한 시험 경험을 제공할 수 있습니다.

#자바스크립트 #JSON #시험지 #동적생성