app.js

const questions = [
    "선교 활동에서 나는 어떤 환경에서 일하는 것을 선호하나요?",
    "나는 선교지에서 무엇을 가장 중요하게 생각하나요?",
    "내가 선호하는 기후는 무엇인가요?",
    "나는 선교지에서 어떤 사역을 더 선호하나요?",
    "선교 활동을 할 때 내가 가장 중요하게 생각하는 것은 무엇인가요?",
    "나는 선교지에서 어떤 사역을 즐기나요?",
    "선교지에서 나는 어느 정도의 언어 능력이 필요한가요?",
    "선교지에서 나는 어떤 형태의 일에 참여하는 것을 선호하나요?",
    "선교지에서 나는 얼마나 자주 외부와의 교류를 갖고 싶나요?",
    "선교지에서 가장 중요한 자원은 무엇이라고 생각하나요?"
  ];
  
  const options = [
    ["A. 바쁜 도시에서 사람들과 많은 교류", "B. 조용한 시골에서 깊은 관계", "C. 다양한 문화 접촉", "D. 도움이 필요한 현장 활동", "E. 의료, 교육 활동"],
    ["A. 대규모 선교와 교회 성장", "B. 개인적인 영성 성숙", "C. 다양한 문화와 언어 경험", "D. 실질적인 도움 사역", "E. 교육, 의료로 사회 변화"],
    ["A. 더운 날씨", "B. 추운 날씨", "C. 온화한 날씨", "D. 습한 날씨", "E. 사계절 뚜렷한 날씨"],
    ["A. 복음 전파와 교회 개척", "B. 공동체 관계 형성", "C. 문화와 언어 교류", "D. 사회적 약자 봉사", "E. 교육적, 의료적 사역"],
    ["A. 많은 사람에게 복음 전파", "B. 개인적 관계를 통한 복음", "C. 새로운 문화 배우기", "D. 사람들의 필요 채워주기", "E. 교육, 의료적 필요 해결"],
    ["A. 대중 강연, 집회", "B. 소그룹 관계 맺기", "C. 해외 문화 교류", "D. 직접적 봉사활동", "E. 교육, 의료 프로그램 운영"],
    ["A. 현지 언어 능숙", "B. 기본 언어만 이해", "C. 문화 교류 중심", "D. 언어 배우며 활동", "E. 영어 사용 가능 지역"],
    ["A. 대규모 캠페인", "B. 지속적 개인 사역", "C. 다양한 문화권 교류", "D. 현장 실질적 도움", "E. 교육 또는 의료 집중"],
    ["A. 많은 사람들과 교류", "B. 소수와 깊이 교류", "C. 다양한 네트워크", "D. 지역사회 연계", "E. 전문가로 활동"],
    ["A. 영적 성장", "B. 관계와 커뮤니티", "C. 문화 인프라", "D. 사회 문제 해결", "E. 교육, 의료 인프라"]
  ];
  
let currentQuestion = 0;
let answers = [];
let selectedAnswer = null;  // 선택한 답변을 임시 저장

function renderQuestion() {
  const qNum = document.getElementById('question-number');
  const qText = document.getElementById('question-text');
  const opts = document.getElementById('options');

  qNum.innerText = `Q${currentQuestion + 1}`;
  qText.innerText = questions[currentQuestion];
  opts.innerHTML = '';

  options[currentQuestion].forEach(option => {
    const btn = document.createElement('button');
    btn.className = 'option-button';
    btn.innerText = option;
    btn.onclick = () => {
      selectAnswer(option[0], btn);
    };
    opts.appendChild(btn);
  });

  renderNextButton();
}

function selectAnswer(choice, buttonElement) {
  selectedAnswer = choice;

  // 선택한 버튼만 하이라이트 (다른 버튼은 원래 색으로)
  const allButtons = document.querySelectorAll('.option-button');
  allButtons.forEach(btn => btn.classList.remove('selected'));
  buttonElement.classList.add('selected');
}

function renderNextButton() {
  const opts = document.getElementById('options');
  const nextBtn = document.createElement('button');
  nextBtn.innerText = '다음으로';
  nextBtn.className = 'next-button';
  nextBtn.onclick = () => {
    if (selectedAnswer === null) {
      alert('답변을 선택해 주세요!');
      return;
    }
    answers[currentQuestion] = selectedAnswer;
    selectedAnswer = null; // 초기화
    nextQuestion();
  };
  opts.appendChild(nextBtn);
}

function nextQuestion() {
  currentQuestion++;
  if (currentQuestion < questions.length) {
    renderQuestion();
  } else {
    showResult();
  }
}

function showResult() {
  const counts = {A:0, B:0, C:0, D:0, E:0};
  answers.forEach(choice => counts[choice]++);
  const best = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b);

  const resultMap = {
    A: "🌍 해외 선교 (도시 선교, 교회 개척, 대규모 복음화 활동)",
    B: "🏡 국내 선교 (소그룹 사역, 개인적 관계 형성)",
    C: "🌏 문화 교류 및 해외 선교 (문화 적응, 언어 학습)",
    D: "🤝 구호 및 사회적 선교 (복지, 봉사활동)",
    E: "📚 교육 및 의료 선교 (전문 사역, 사회 변화)"
  };

  document.getElementById('question-box').style.display = 'none';
  const resultBox = document.getElementById('result-box');
  resultBox.style.display = 'block';
  document.getElementById('result-text').innerText = resultMap[best];

  db.collection('surveyAnswers').add({
    answers: answers,
    result: resultMap[best],
    timestamp: new Date()
  });
}

// 처음 시작
renderQuestion();