조선메트로3호선 개발노트 007

2020-07-03

2020년 6월 25일부터 근정전 상월대 하월대 경험을 위한 스토리 이벤트 및 미션을 제작 중에 있었다.
주관식처럼 입력하는 거 말고 객관식으로 넘기는 것도 만들어보고 싶어서 응용해볼만한 소스를 찾아다녔고, 마음에 드는 소스를 발견했다.

<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>퀴즈 프로그램 만들기</title>
</head>
<body>
 <h1>한국사 8급 문제</h1>
 <p> 1. 다음 중 고려시대 왕은?</p>
 <form name="form">
  <input type="radio" name="kingName" value="v1">근초고왕<br>
  <input type="radio" name="kingName" value="v2">의자왕<br>
  <input type="radio" name="kingName" value="v3">충렬왕<br>
  <input type="radio" name="kingName" value="v4">성종<br>
  <input type="button" name="선택" value="정답확인" onclick="myFucntion()">
 </form>
 <p id="check"></p>
 <script type="text/javascript">
  function myFucntion() {
   if(form.kingName[2].checked==true) document.getElementById("check").innerHTML="정답입니다.";
   else document.getElementById("check").innerHTML="오답입니다.";
  }
 </script>
</body>
</html>

출처: https://yuchae.tistory.com/260 [앙큼한유채's 일상 Story]

문제는 쉽게 해결될 줄 알았다. 그러나 역시 생각대로 그렇게 쉽지 않았다.
원래 소스에서와 달리 월드플레이 게임에서는 문제를 맞추면 다음으로 페이지가 이동해야하는 것이다.
그런데 버튼이 안 먹히는 것이다. ….
그 이후로 수만가지 삽질을 지속했고, 그냥 버튼으로 처리하고 나중에 다시 생각해보려고 했었다.

그리고 두둥 2020년 7월 3일!
주관식 입력문제의 html 코드에서 객관식 문제를 해결할 방법이 눈에 들어왔다.

내가 그동안 주관식 입력을 하고 다음페이지로 링크를 이동할 때 썼던 것은 다음과 같았다.

<div class="answer" style="background-color:#E8C585">
      <p> 백호는 어디에 놓여야 할까?
    </div>


    <form name="form_id">
     <input type="radio" name="direction" value="v1">상월대 동쪽<br>
     <input type="radio" name="direction" value="v2">상월대 서쪽<br>
     <input type="radio" name="direction" value="v3">상월대 북쪽<br>
     <input type="button" name="선택" value="이동한다" onclick="go()">
    </form>
    <p id="check"></p>


    <script language=javascript>
    function go(){
    if(document.form_id.direction[1].checked==true){
      window.location.href="metroJoseon_scene45.html";//현재페이지의 주소를 해당페이지로 바꿉니다.
    }else if (document.form_id.direction[0].checked==true) {
      window.location.href="metroJoseon_scene44.html";
    }else if (document.form_id.direction[2].checked==true) {
      window.location.href="metroJoseon_scene46.html";
    }else{
      location.href="noname3.html";
    }
    };
    </script>

document 객체를 쓰면서 form name으로 속성값을 잡고 input의 name을 배열값으로 삼은 뒤 checked 를 넣었다.
여기까지는 이전의 시행착오에서도 비슷했는데 하나 달랐던 것이

 조선메트로3호선 개발노트 006 조선메트로3호선 개발노트 008 