[엘카데미 챌린지] Bard로 만드는 MBTI 검사 웹사이트 7일차

오늘은 MBTI검사를 진행하기 위한 질문을 만들었다. 그리고 JavaScript도 사용하는 날이었다. index.js라는 파일을 만들고 파일에 MBTI검사 진행을 위한 질문들을 넣어주었다. 매우 흥미로웠던 점은 Bard를 이용해 JavaScript의 형식에 맞춰 코딩만 생성하는 것이 아니라 MBTI검사를 위한 질문목록까지 같이 만들었다는 점이었다.

밑의 코드블록에서 const questions = 부분 말고는 나머지가 다 Bard로 생성된 부분이다. 다만 이번에는 Bard에게 12개의 질문을 생성해 달라고 했는데 처음에는 8개의 질문만 만들어주어 답변을 다시 한번 생성해 주는 과정을 거쳐야 했다. 

const questions = [
  {
    id: 1,
    text: "나는 혼자 있는 것보다 사람들과 함께 있는 것을 더 좋아한다.",
    yes: "E",
    no: "I"
  },
  {
    id: 2,
    text: "나는 새로운 경험을 하는 것을 좋아한다.",
    yes: "N",
    no: "S"
  },
  {
    id: 3,
    text: "나는 논리적인 것보다 감정적인 것을 더 중요하게 생각한다.",
    yes: "F",
    no: "T"
  },
  {
    id: 4,
    text: "나는 계획을 세우는 것을 좋아한다.",
    yes: "J",
    no: "P"
  },
  {
    id: 5,
    text: "나는 혼자 있는 것을 선호한다.",
    yes: "I",
    no: "E"
  },
  {
    id: 6,
    text: "나는 일상적인 것을 좋아한다.",
    yes: "S",
    no: "N"
  },
  {
    id: 7,
    text: "나는 논리적인 것을 더 중요하게 생각한다.",
    yes: "T",
    no: "F"
  },
  {
    id: 8,
    text: "나는 계획을 세우는 것을 싫어한다.",
    yes: "P",
    no: "J"
  },
  {
    id: 9,
    text: "나는 혼자 있는 것보다 사람들과 함께 있는 것을 선호한다.",
    yes: "E",
    no: "I"
  },
  {
    id: 10,
    text: "나는 새로운 경험을 하는 것을 좋아한다.",
    yes: "N",
    no: "S"
  },
  {
    id: 11,
    text: "나는 논리적인 것보다 감정적인 것을 더 중요하게 생각한다.",
    yes: "F",
    no: "T"
  },
  {
    id: 12,
    text: "나는 계획을 세우는 것을 좋아한다.",
    yes: "J",
    no: "P"
  }
]

그리고 이 상태로는 버튼 클릭 이벤트가 작동하지 않기 때문에 버튼을 클릭하면 화면이 바뀌도록 하는 코드도 추가해주어야 한다. 

이 코드 역시 Bard로 작성했다. 다만 Bard가 제시해 준 코드를 붙여 넣기 해도 작동이 제대로 되지 않았다. 결국 답변을 몇 번 재생성해서 나온 코드 중 하나를 이용하니 결국 제대로 작동하기는 했다. 아직은 Bard에게 전적으로 코드작성을 맡기는 것은 무리라는 생각이 들었다. 그리고 페이지의 필요한 요소들도 예시로 제시해 준 질문에 매우 상세하게 쓰여있는데도 Bard가 빠트리는 부분이 있었다. 

const currentQuestion = 0;
const answers = [];

const yesButton = document.getElementById("yes-button");
const noButton = document.getElementById("no-button");

yesButton.addEventListener("click", () => {
  answers[currentQuestion] = questions[currentQuestion].yes;
  currentQuestion++;
  if (currentQuestion === questions.length) {
    // 마지막 질문에 도달 했을 때
    // 결과 페이지로 이동
  } else {
    // 다음 질문으로 이동
    document.getElementById("question-number").innerHTML = currentQuestion + 1;
    document.getElementById("question").innerHTML = questions[currentQuestion].text;
  }
});

noButton.addEventListener("click", () => {
  answers[currentQuestion] = questions[currentQuestion].no;
  currentQuestion++;
  if (currentQuestion === questions.length) {
    // 마지막 질문에 도달 했을 때
    // 결과 페이지로 이동
  } else {
    // 다음 질문으로 이동
    document.getElementById("question-number").innerHTML = currentQuestion + 1;
    document.getElementById("question").innerHTML = questions[currentQuestion].text;
  }
});

이게 최종적으로 딱 하나 작동하는 코드였다. 일반적인 코딩과 다르게 Bard의 답변이 수업과는 조금씩 다를 수도 있다는 것이 흥미롭다. 일반적인 코딩은 수업내용과 정확히 일치하면 프로그램이 돌아가는데 이번 실습에서는 예시로 제시해 준 코드와 내가 Bard에서 생성한 코드가 다르다. 그럼에도 불구하고 둘 다 동작한다.