자바스크립트에서 JSON 데이터를 이용하여 설문 조사 생성하기

15 Sep 2023

javascript

이번 포스트에서는 자바스크립트를 사용하여 JSON 데이터를 이용하여 설문 조사를 생성하는 방법에 대해 알아보겠습니다.

JSON 데이터 준비하기

먼저, 설문 조사에 필요한 질문과 선택지를 JSON 형식으로 정의해야 합니다. 아래는 예시입니다.

const surveyData = `
{
  "title": "테크 블로그 포스트에 대한 설문조사",
  "questions": [
    {
      "question": "포스트를 어떻게 평가하시나요?",
      "choices": ["매우 유익함", "유익함", "보통", "부족함"],
      "multiple": false
    },
    {
      "question": "어떤 주제를 다루었으면 좋겠나요?",
      "choices": ["JavaScript", "Python", "Data Science", "AI/ML", "Web 개발", "기타"],
      "multiple": true
    },
    {
      "question": "추가적인 의견이 있다면 남겨주세요."
    }
  ]
}
`;

위의 예시에서는 “title”과 “questions”라는 키를 가진 객체를 정의하였습니다. “title”은 설문 조사의 제목을 의미하며, “questions”는 질문과 선택지를 담고 있는 배열입니다. 각각의 질문은 “question”과 “choices” 키를 가지며, “multiple”은 다중 선택 가능 여부를 나타냅니다. 마지막 질문은 선택지 없이 오픈 텍스트로 정의하였습니다.

설문 조사 생성하기

이제 JSON 데이터를 사용하여 설문 조사를 생성해보겠습니다. 아래는 예시 코드입니다.

const surveyContainer = document.getElementById('survey-container');

function createSurvey(surveyData) {
  const data = JSON.parse(surveyData);

  const surveyTitle = document.createElement('h2');
  surveyTitle.textContent = data.title;
  surveyContainer.appendChild(surveyTitle);

  for (const questionData of data.questions) {
    const questionContainer = document.createElement('div');
    const questionElement = document.createElement('p');
    questionElement.textContent = questionData.question;
    questionContainer.appendChild(questionElement);

    if (questionData.choices) {
      for (const choice of questionData.choices) {
        const choiceElement = document.createElement('input');
        choiceElement.type = questionData.multiple ? 'checkbox' : 'radio';
        choiceElement.name = questionData.question;
        // Add choice text to the label
        const choiceLabel = document.createElement('label');
        choiceLabel.textContent = choice;
        choiceLabel.appendChild(choiceElement);

        questionContainer.appendChild(choiceLabel);
      }
    } else {
      const textInput = document.createElement('textarea');
      questionContainer.appendChild(textInput);
    }

    surveyContainer.appendChild(questionContainer);
  }

  const submitButton = document.createElement('button');
  submitButton.textContent = '제출하기';
  surveyContainer.appendChild(submitButton);
}

createSurvey(surveyData);

위의 코드는 createSurvey 함수를 통해 JSON 데이터를 파싱하여 설문 조사 폼을 동적으로 생성하는 역할을 합니다. 함수를 호출하면 surveyContainer라는 HTML 요소에 설문 조사 폼이 생성됩니다. “title”은 <h2> 요소로 생성되고, “questions”의 각 질문은 <p> 요소로 생성됩니다. 선택지가 있는 질문은 <input> 요소로 선택지와 함께 생성되며, 선택지가 없는 질문은 <textarea> 요소로 생성됩니다. 마지막으로 “제출하기” 버튼이 생성됩니다.

이렇게 자바스크립트를 사용하여 JSON 데이터로 설문 조사를 생성할 수 있습니다.

마무리

이번 포스트에서는 자바스크립트를 사용하여 JSON 데이터를 이용하여 설문 조사를 생성하는 방법을 살펴보았습니다. 이를 활용하여 동적인 설문 조사를 구현하고, 사용자의 의견을 수집할 수 있습니다.

#TechBlog #JavaScript #JSON #설문조사