본문 바로가기

Project

Project 4일차 - MBTI 설문 사이트 구현

728x90
반응형

1) 4일차

    1-1) html

 

 

 

 

1) 4일차

1-1) html

main.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/public/css/main.css" />
  </head>
  <body>
    <div id="wrap">
      <!-- header 영역 -->
      <div id="header_wrap">
        <div id="header">
          <h1>
            <a href="/main.html">
              <img
                src="https://static.neris-assets.com/images/system/logo.svg"
                alt="site_logo"
              />
            </a>
          </h1>
          <ul>
            <li>
              <a href="/mbti/survey1.html">
                <span>성격 유형 검사</span>
              </a>
            </li>
            <li>
              <a href="/mbti/survey1.html">
                <span>성격 유형</span>
              </a>
            </li>
            <li>
              <a
                href="https://www.16personalities.com/ko/%EC%97%B0%EB%9D%BD%EC%B2%98"
              >
                <span>연락처</span>
              </a>
            </li>
          </ul>
          <a href="">
            <span>
              <img
                src="https://static.neris-assets.com/images/international/flags/kr.svg"
                alt="태극기"
              />
            </span>
            <span>한국어</span>
          </a>
        </div>
      </div>

      <!-- visual 영역 -->
      <div id="visual_wrap">
        <div id="visual">
          <div id="mnt">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 1920 60"
              preserveAspectRatio="none"
              class="angular-1920-1 hero__shape hero__shape--top"
            >
              <path
                d="m0 20 420 40L800 0l750 60 370-45V0H0z"
                style="fill: #fff"
              ></path>
            </svg>
          </div>
          <h1>
            16Personalities 검사가 너무 정확해 "살짝 소름이 돋을 정도예요"라고
            성격 유형 검사를 마친 한 참여자는 말했습니다.
          </h1>
          <p>
            쉽고 간단하면서도 정확한 성격 유형 검사를 통해 당신이 누구이며, 왜
            그러한 특정 행동 성향을 보이는지 확인하십시오.
          </p>
          <div id="start">
            <a href="/mbti/survey1.html">
              <button class="startBtn">
                <span>검사 실시</span>
                <span class="arrow">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    role="img"
                    viewBox="0 0 48 48"
                    aria-labelledby="next_arrow"
                  >
                    <title id="next_arrow">다음</title>
                    <path
                      data-v-339f1828=""
                      d="M23.446875,3.571875 L21.590625,5.428125 C21.15,5.86875 21.15,6.58125 21.590625,7.021875 L36.13125,21.5625 L4.125,21.5625 C3.50625,21.5625 3,22.06875 3,22.6875 L3,25.3125 C3,25.93125 3.50625,26.4375 4.125,26.4375 L36.13125,26.4375 L21.590625,40.978125 C21.15,41.41875 21.15,42.13125 21.590625,42.571875 L23.446875,44.428125 C23.8875,44.86875 24.6,44.86875 25.040625,44.428125 L44.671875,24.796875 C45.1125,24.35625 45.1125,23.64375 44.671875,23.203125 L25.040625,3.571875 C24.6,3.13125 23.8875,3.13125 23.446875,3.571875 Z"
                    ></path>
                  </svg>
                </span>
              </button>
            </a>
          </div>
        </div>
      </div>

      <!-- contents 영역 -->
      <div id="contents_wrap">
        <div id="contents">
          <img
            width="377"
            height="201"
            srcset="
              https://static.neris-assets.com/images/homepage/header-mountains-mobile.svg   768w,
              https://static.neris-assets.com/images/homepage/header-mountains-desktop.svg 1600w
            "
            sizes="(max-width: 768px) 100vw, 100vw"
            src="https://static.neris-assets.com/images/homepage/header-mountains-desktop.svg"
          />
        </div>
      </div>

      <!-- footer 영역 -->
      <div id="footer_wrap">
        <div id="footer">
          <div class="footer__copyright">
            ©2011-2022 NERIS Analytics Limited
          </div>
          <div id="footer_links">
            <a
              href="https://www.16personalities.com/contact-us"
              class="link--inline"
              >Contact</a
            >
            <a
              href="https://www.16personalities.com/orders/testimonials"
              class="link--inline hide--checkout"
              >Testimonials</a
            >
            <a href="https://www.16personalities.com/terms" class="link--inline"
              >Terms & Conditions</a
            >
            <a
              href="https://www.16personalities.com/terms/privacy"
              class="link--inline last--checkout"
              >Privacy Policy</a
            >
            <a
              href="https://www.16personalities.com/tools/teams"
              class="link--inline hide--checkout"
              >For Teams</a
            >
          </div>
          <div class="translation-alert">
            <strong>Disclaimer</strong>
            : All non-English versions of the website contain automated
            translations or translations submitted by our users. They are not
            binding in any way, are not guaranteed to be accurate, and have no
            legal effect. The official text is the
            <a href="#" class="with-border">English version</a>
            of the website. Please consider reporting inaccuracies to
            <a href="mailto:support@16personalities.com" class="with-border"
              >support@16personalities.com</a
            >
            or join our
            <a
              href="https://www.16personalities.com/translations"
              class="with-border"
              >translation project</a
            >!
          </div>
        </div>
      </div>
    </div>
    <script src="/public/js/survey1.js" type="text/javascript"></script>
  </body>
</html>

 

 

survey1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/public/css/color.css" />
  </head>
  <body>
    <div id="wrap">
      <!-- header 영역 -->
      <div id="header_wrap">
        <div id="header">
          <h1>
            <a href="/main.html">
              <img
                src="https://static.neris-assets.com/images/system/logo.svg"
                alt="site_logo"
              />
            </a>
          </h1>
          <ul>
            <li>
              <a href="/mbti/survey1.html">
                <span>성격 유형 검사</span>
              </a>
            </li>
            <li>
              <a
                href="https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9-%EC%9C%A0%ED%98%95"
              >
                <span>성격 유형</span>
              </a>
            </li>
            <li>
              <a
                href="https://www.16personalities.com/ko/%EC%97%B0%EB%9D%BD%EC%B2%98"
              >
                <span>연락처</span>
              </a>
            </li>
          </ul>
          <a href="">
            <span>
              <img
                src="https://static.neris-assets.com/images/international/flags/kr.svg"
                alt="태극기"
              />
            </span>
            <span>한국어</span>
          </a>
        </div>
      </div>

      <!-- visual 영역 -->
      <div id="visual_wrap">
        <div id="visual">
          <h1>무료 성격유형검사</h1>
          <div id="mark">
            NERIS Type Explorer
            <sup>®</sup>
          </div>
          <div id="notice">
            <div id="tips">
              <div class="tip" id="first">
                <div class="text">
                  <span class="title">총 검사 시간은 12분 내외입니다.</span>
                </div>
              </div>

              <div class="tip" id="second">
                <div class="text">
                  <span class="title">
                    혹 질문이 마음에 들지 않더라도 정직하게 답변하십시오.
                  </span>
                </div>
              </div>

              <div class="tip" id="third">
                <div class="text">
                  <span class="title">
                    가능하면 답변 시 '중립'을 선택하지 마십시오.
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div id="shape_wrap">
            <ul id="shape">
              <li id="first_img"></li>
              <li id="second_img"></li>
              <li id="third_img"></li>
            </ul>
          </div>
        </div>
      </div>

      <!-- contents 영역 -->
      <div id="contents_wrap">
        <div id="contents">
          <div id="question">
            <ul id="statement">
              <li id="q1" class="checked">
                <p>주기적으로 새로운 친구를 만든다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q2" class="unchecked">
                <p>
                  자유 시간 중 상당 부분을 다양한 관심사를 탐구하는 데 할애한다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q3" class="unchecked">
                <p>
                  다른 사람이 울고 있는 모습을 보면 자신도 울고 싶어질 때가
                  많다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q4" class="unchecked">
                <p>일이 잘못될 때를 대비해 여러 대비책을 세우는 편이다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q5" class="unchecked">
                <p>압박감이 심한 환경에서도 평정심을 유지하는 편이다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q6" class="unchecked">
                <p>
                  파티나 행사에서 새로운 사람에게 먼저 자신을 소개하기보다는
                  주로 이미 알고 있는 사람과 대화하는 편이다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q7" class="unchecked">
                <p>
                  하나의 프로젝트를 완전히 완료한 후 다른 프로젝트를 시작하는
                  편이다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q8" class="unchecked">
                <p>매우 감상적인 편이다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q9" class="unchecked">
                <p>일정이나 목록으로 계획을 세우는 일을 좋아한다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q10" class="unchecked">
                <p>작은 실수로도 자신의 능력이나 지식을 의심하곤 한다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q11" class="unchecked">
                <p>
                  관심이 가는 사람에게 다가가서 대화를 시작하기가 어렵지 않다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q12" class="unchecked">
                <p>
                  예술 작품의 다양한 해석에 대해 토론하는 일에는 크게 관심이
                  없다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
            </ul>
          </div>
          <div id="next_question">
            <a href="/mbti/survey2.html#nextButton">
              <button class="nextBtn">
                <span>다음</span>
                <span class="arrow">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    role="img"
                    viewBox="0 0 48 48"
                    aria-labelledby="next_arrow"
                  >
                    <title id="next_arrow">다음</title>
                    <path
                      data-v-339f1828=""
                      d="M23.446875,3.571875 L21.590625,5.428125 C21.15,5.86875 21.15,6.58125 21.590625,7.021875 L36.13125,21.5625 L4.125,21.5625 C3.50625,21.5625 3,22.06875 3,22.6875 L3,25.3125 C3,25.93125 3.50625,26.4375 4.125,26.4375 L36.13125,26.4375 L21.590625,40.978125 C21.15,41.41875 21.15,42.13125 21.590625,42.571875 L23.446875,44.428125 C23.8875,44.86875 24.6,44.86875 25.040625,44.428125 L44.671875,24.796875 C45.1125,24.35625 45.1125,23.64375 44.671875,23.203125 L25.040625,3.571875 C24.6,3.13125 23.8875,3.13125 23.446875,3.571875 Z"
                    ></path>
                  </svg>
                </span>
              </button>
            </a>
          </div>
        </div>
      </div>

      <!-- footer 영역 -->
      <div id="footer_wrap">
        <div id="footer">
          <div class="footer__copyright">
            ©2011-2022 NERIS Analytics Limited
          </div>
          <div id="footer_links">
            <a
              href="https://www.16personalities.com/contact-us"
              class="link--inline"
              >Contact</a
            >
            <a
              href="https://www.16personalities.com/orders/testimonials"
              class="link--inline hide--checkout"
              >Testimonials</a
            >
            <a href="https://www.16personalities.com/terms" class="link--inline"
              >Terms & Conditions</a
            >
            <a
              href="https://www.16personalities.com/terms/privacy"
              class="link--inline last--checkout"
              >Privacy Policy</a
            >
            <a
              href="https://www.16personalities.com/tools/teams"
              class="link--inline hide--checkout"
              >For Teams</a
            >
          </div>
          <div class="translation-alert">
            <strong>Disclaimer</strong>
            : All non-English versions of the website contain automated
            translations or translations submitted by our users. They are not
            binding in any way, are not guaranteed to be accurate, and have no
            legal effect. The official text is the
            <a href="#" class="with-border">English version</a>
            of the website. Please consider reporting inaccuracies to
            <a href="mailto:support@16personalities.com" class="with-border"
              >support@16personalities.com</a
            >
            or join our
            <a
              href="https://www.16personalities.com/translations"
              class="with-border"
              >translation project</a
            >!
          </div>
        </div>
      </div>
    </div>
    <script src="/public/js/survey1.js" type="text/javascript"></script>
  </body>
</html>

 

 

survey2.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../public/css/color.css" />
  </head>
  <body>
    <div id="wrap">
      <!-- header 영역 -->
      <div id="header_wrap">
        <div id="header">
          <h1>
            <a href="/main.html">
              <img
                src="https://static.neris-assets.com/images/system/logo.svg"
                alt="site_logo"
              />
            </a>
          </h1>
          <ul>
            <li>
              <a href="/mbti/survey1.html">
                <span>성격 유형 검사</span>
              </a>
            </li>
            <li>
              <a
                href="https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9-%EC%9C%A0%ED%98%95"
              >
                <span>성격 유형</span>
              </a>
            </li>
            <li>
              <a
                href="https://www.16personalities.com/ko/%EC%97%B0%EB%9D%BD%EC%B2%98"
              >
                <span>연락처</span>
              </a>
            </li>
          </ul>
          <a href="">
            <span>
              <img
                src="https://static.neris-assets.com/images/international/flags/kr.svg"
                alt="태극기"
              />
            </span>
            <span>한국어</span>
          </a>
        </div>
      </div>

      <!-- visual 영역 -->
      <div id="visual_wrap">
        <div id="visual">
          <h1>무료 성격유형검사</h1>
          <div id="mark">
            NERIS Type Explorer
            <sup>®</sup>
          </div>
          <div id="notice">
            <div id="tips">
              <div class="tip" id="first">
                <div class="text">
                  <span class="title">총 검사 시간은 12분 내외입니다.</span>
                </div>
              </div>

              <div class="tip" id="second">
                <div class="text">
                  <span class="title">
                    혹 질문이 마음에 들지 않더라도 정직하게 답변하십시오.
                  </span>
                </div>
              </div>

              <div class="tip" id="third">
                <div class="text">
                  <span class="title">
                    가능하면 답변 시 '중립'을 선택하지 마십시오.
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div id="shape_wrap">
            <ul id="shape">
              <li id="first_img"></li>
              <li id="second_img"></li>
              <li id="third_img"></li>
            </ul>
          </div>
        </div>
      </div>

      <!-- a 태그를 통한 사이트 특정 위치 앵커작업 -->
      <a name="nextButton"></a>

      <!-- progress 태그를 활용한 설문 진행률 bar 구현 작업 -->
      <div id="progress">
        <span id="percent">20%</span>
        <progress id="prg_bar" value="20" min="0" max="100"></progress>
      </div>

      <!-- contents 영역 -->
      <div id="contents_wrap">
        <div id="contents">
          <div id="question">
            <ul id="statement">
              <li id="q1" class="checked">
                <p>감정보다는 이성을 따르는 편이다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q2" class="unchecked">
                <p>
                  하루 일정을 계획하기보다는 즉흥적으로 하고 싶은 일을 하는 것을
                  좋아한다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q3" class="unchecked">
                <p>
                  다른 사람에게 자신이 어떤 사람으로 보일지 걱정하지 않는
                  편이다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q4" class="unchecked">
                <p>단체 활동에 참여하는 일을 즐긴다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q5" class="unchecked">
                <p>
                  결말을 자신의 방식으로 해석할 수 있는 책과 영화를 좋아한다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q6" class="unchecked">
                <p>자신보다는 남의 성공을 돕는 일에서 더 큰 만족감을 느낀다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q7" class="unchecked">
                <p>
                  관심사가 너무 많아 다음에 어떤 일을 해야 할지 모를 때가 있다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q8" class="unchecked">
                <p>일이 잘못될까봐 자주 걱정하는 편이다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q9" class="unchecked">
                <p>단체에서 지도자 역할을 맡는 일은 가능한 피하고 싶다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q10" class="unchecked">
                <p>자신에게 예술적 성향이 거의 없다고 생각한다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q11" class="unchecked">
                <p>
                  사람들이 감정보다는 이성을 중시했다면 더 나은 세상이
                  되었으리라고 생각한다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q12" class="unchecked">
                <p>휴식을 취하기 전에 집안일을 먼저 끝내기를 원한다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
            </ul>
          </div>
          <div id="next_question">
            <a href="/mbti/survey3.html#nextButton">
              <button class="nextBtn">
                <span>다음</span>
                <span class="arrow">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    role="img"
                    viewBox="0 0 48 48"
                    aria-labelledby="next_arrow"
                  >
                    <title id="next_arrow">다음</title>
                    <path
                      data-v-339f1828=""
                      d="M23.446875,3.571875 L21.590625,5.428125 C21.15,5.86875 21.15,6.58125 21.590625,7.021875 L36.13125,21.5625 L4.125,21.5625 C3.50625,21.5625 3,22.06875 3,22.6875 L3,25.3125 C3,25.93125 3.50625,26.4375 4.125,26.4375 L36.13125,26.4375 L21.590625,40.978125 C21.15,41.41875 21.15,42.13125 21.590625,42.571875 L23.446875,44.428125 C23.8875,44.86875 24.6,44.86875 25.040625,44.428125 L44.671875,24.796875 C45.1125,24.35625 45.1125,23.64375 44.671875,23.203125 L25.040625,3.571875 C24.6,3.13125 23.8875,3.13125 23.446875,3.571875 Z"
                    ></path>
                  </svg>
                </span>
              </button>
            </a>
          </div>
        </div>
      </div>

      <!-- footer 영역 -->
      <div id="footer_wrap">
        <div id="footer">
          <div class="footer__copyright">
            ©2011-2022 NERIS Analytics Limited
          </div>
          <div id="footer_links">
            <a
              href="https://www.16personalities.com/contact-us"
              class="link--inline"
              >Contact</a
            >
            <a
              href="https://www.16personalities.com/orders/testimonials"
              class="link--inline hide--checkout"
              >Testimonials</a
            >
            <a href="https://www.16personalities.com/terms" class="link--inline"
              >Terms & Conditions</a
            >
            <a
              href="https://www.16personalities.com/terms/privacy"
              class="link--inline last--checkout"
              >Privacy Policy</a
            >
            <a
              href="https://www.16personalities.com/tools/teams"
              class="link--inline hide--checkout"
              >For Teams</a
            >
          </div>
          <div class="translation-alert">
            <strong>Disclaimer</strong>
            : All non-English versions of the website contain automated
            translations or translations submitted by our users. They are not
            binding in any way, are not guaranteed to be accurate, and have no
            legal effect. The official text is the
            <a href="#" class="with-border">English version</a>
            of the website. Please consider reporting inaccuracies to
            <a href="mailto:support@16personalities.com" class="with-border"
              >support@16personalities.com</a
            >
            or join our
            <a
              href="https://www.16personalities.com/translations"
              class="with-border"
              >translation project</a
            >!
          </div>
        </div>
      </div>
    </div>
    <script src="/public/js/survey2.js" type="text/javascript"></script>
  </body>
</html>

 

 

survey3.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../public/css/color.css" />
  </head>
  <body>
    <div id="wrap">
      <!-- header 영역 -->
      <div id="header_wrap">
        <div id="header">
          <h1>
            <a href="/main.html">
              <img
                src="https://static.neris-assets.com/images/system/logo.svg"
                alt="site_logo"
              />
            </a>
          </h1>
          <ul>
            <li>
              <a href="/mbti/survey1.html">
                <span>성격 유형 검사</span>
              </a>
            </li>
            <li>
              <a
                href="https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9-%EC%9C%A0%ED%98%95"
              >
                <span>성격 유형</span>
              </a>
            </li>
            <li>
              <a
                href="https://www.16personalities.com/ko/%EC%97%B0%EB%9D%BD%EC%B2%98"
              >
                <span>연락처</span>
              </a>
            </li>
          </ul>
          <a href="">
            <span>
              <img
                src="https://static.neris-assets.com/images/international/flags/kr.svg"
                alt="태극기"
              />
            </span>
            <span>한국어</span>
          </a>
        </div>
      </div>

      <!-- visual 영역 -->
      <div id="visual_wrap">
        <div id="visual">
          <h1>무료 성격유형검사</h1>
          <div id="mark">
            NERIS Type Explorer
            <sup>®</sup>
          </div>
          <div id="notice">
            <div id="tips">
              <div class="tip" id="first">
                <div class="text">
                  <span class="title">총 검사 시간은 12분 내외입니다.</span>
                </div>
              </div>

              <div class="tip" id="second">
                <div class="text">
                  <span class="title">
                    혹 질문이 마음에 들지 않더라도 정직하게 답변하십시오.
                  </span>
                </div>
              </div>

              <div class="tip" id="third">
                <div class="text">
                  <span class="title">
                    가능하면 답변 시 '중립'을 선택하지 마십시오.
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div id="shape_wrap">
            <ul id="shape">
              <li id="first_img"></li>
              <li id="second_img"></li>
              <li id="third_img"></li>
            </ul>
          </div>
        </div>
      </div>

      <!-- a 태그를 통한 사이트 특정 위치 앵커작업 -->
      <a name="nextButton"></a>

      <!-- progress 태그를 활용한 설문 진행률 bar 구현 작업 -->
      <div id="progress">
        <span id="percent">40%</span>
        <progress id="prg_bar" value="40" min="0" max="100"></progress>
      </div>

      <!-- contents 영역 -->
      <div id="contents_wrap">
        <div id="contents">
          <div id="question">
            <ul id="statement">
              <li id="q1" class="checked">
                <p>다른 사람의 논쟁을 바라보는 일이 즐겁다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q2" class="unchecked">
                <p>다른 사람의 주의를 끌지 않으려고 하는 편이다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q3" class="unchecked">
                <p>감정이 매우 빠르게 변하곤 한다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q4" class="unchecked">
                <p>자신만큼 효율적이지 못한 사람을 보면 짜증이 난다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q5" class="unchecked">
                <p>해야 할 일을 마지막까지 미룰 때가 많다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q6" class="unchecked">
                <p>사후세계에 대한 질문이 흥미롭다고 생각한다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q7" class="unchecked">
                <p>혼자보다는 다른 사람과 시간을 보내고 싶어한다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q8" class="unchecked">
                <p>
                  이론 중심의 토론에는 관심이 없으며 원론적인 이야기는
                  지루하다고 생각한다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q9" class="unchecked">
                <p>자신과 배경이 완전히 다른 사람에게도 쉽게 공감할 수 있다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q10" class="unchecked">
                <p>결정을 내리는 일을 마지막까지 미루는 편이다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q11" class="unchecked">
                <p>이미 내린 결정에 대해서는 다시 생각하지 않는 편이다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q12" class="unchecked">
                <p>
                  혼자만의 시간을 보내기보다는 즐거운 파티와 행사로 일주일의
                  피로를 푸는 편이다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
            </ul>
          </div>
          <div id="next_question">
            <a href="/mbti/survey4.html#nextButton">
              <button class="nextBtn">
                <span>다음</span>
                <span class="arrow">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    role="img"
                    viewBox="0 0 48 48"
                    aria-labelledby="next_arrow"
                  >
                    <title id="next_arrow">다음</title>
                    <path
                      data-v-339f1828=""
                      d="M23.446875,3.571875 L21.590625,5.428125 C21.15,5.86875 21.15,6.58125 21.590625,7.021875 L36.13125,21.5625 L4.125,21.5625 C3.50625,21.5625 3,22.06875 3,22.6875 L3,25.3125 C3,25.93125 3.50625,26.4375 4.125,26.4375 L36.13125,26.4375 L21.590625,40.978125 C21.15,41.41875 21.15,42.13125 21.590625,42.571875 L23.446875,44.428125 C23.8875,44.86875 24.6,44.86875 25.040625,44.428125 L44.671875,24.796875 C45.1125,24.35625 45.1125,23.64375 44.671875,23.203125 L25.040625,3.571875 C24.6,3.13125 23.8875,3.13125 23.446875,3.571875 Z"
                    ></path>
                  </svg>
                </span>
              </button>
            </a>
          </div>
        </div>
      </div>

      <!-- footer 영역 -->
      <div id="footer_wrap">
        <div id="footer">
          <div class="footer__copyright">
            ©2011-2022 NERIS Analytics Limited
          </div>
          <div id="footer_links">
            <a
              href="https://www.16personalities.com/contact-us"
              class="link--inline"
              >Contact</a
            >
            <a
              href="https://www.16personalities.com/orders/testimonials"
              class="link--inline hide--checkout"
              >Testimonials</a
            >
            <a href="https://www.16personalities.com/terms" class="link--inline"
              >Terms & Conditions</a
            >
            <a
              href="https://www.16personalities.com/terms/privacy"
              class="link--inline last--checkout"
              >Privacy Policy</a
            >
            <a
              href="https://www.16personalities.com/tools/teams"
              class="link--inline hide--checkout"
              >For Teams</a
            >
          </div>
          <div class="translation-alert">
            <strong>Disclaimer</strong>
            : All non-English versions of the website contain automated
            translations or translations submitted by our users. They are not
            binding in any way, are not guaranteed to be accurate, and have no
            legal effect. The official text is the
            <a href="#" class="with-border">English version</a>
            of the website. Please consider reporting inaccuracies to
            <a href="mailto:support@16personalities.com" class="with-border"
              >support@16personalities.com</a
            >
            or join our
            <a
              href="https://www.16personalities.com/translations"
              class="with-border"
              >translation project</a
            >!
          </div>
        </div>
      </div>
    </div>
    <script src="/public/js/survey3.js" type="text/javascript"></script>
  </body>
</html>

 

 

survey4.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../public/css/color.css" />
  </head>
  <body>
    <div id="wrap">
      <!-- header 영역 -->
      <div id="header_wrap">
        <div id="header">
          <h1>
            <a href="/main.html">
              <img
                src="https://static.neris-assets.com/images/system/logo.svg"
                alt="site_logo"
              />
            </a>
          </h1>
          <ul>
            <li>
              <a href="/mbti/survey1.html">
                <span>성격 유형 검사</span>
              </a>
            </li>
            <li>
              <a
                href="https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9-%EC%9C%A0%ED%98%95"
              >
                <span>성격 유형</span>
              </a>
            </li>
            <li>
              <a
                href="https://www.16personalities.com/ko/%EC%97%B0%EB%9D%BD%EC%B2%98"
              >
                <span>연락처</span>
              </a>
            </li>
          </ul>
          <a href="">
            <span>
              <img
                src="https://static.neris-assets.com/images/international/flags/kr.svg"
                alt="태극기"
              />
            </span>
            <span>한국어</span>
          </a>
        </div>
      </div>

      <!-- visual 영역 -->
      <div id="visual_wrap">
        <div id="visual">
          <h1>무료 성격유형검사</h1>
          <div id="mark">
            NERIS Type Explorer
            <sup>®</sup>
          </div>
          <div id="notice">
            <div id="tips">
              <div class="tip" id="first">
                <div class="text">
                  <span class="title">총 검사 시간은 12분 내외입니다.</span>
                </div>
              </div>

              <div class="tip" id="second">
                <div class="text">
                  <span class="title">
                    혹 질문이 마음에 들지 않더라도 정직하게 답변하십시오.
                  </span>
                </div>
              </div>

              <div class="tip" id="third">
                <div class="text">
                  <span class="title">
                    가능하면 답변 시 '중립'을 선택하지 마십시오.
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div id="shape_wrap">
            <ul id="shape">
              <li id="first_img"></li>
              <li id="second_img"></li>
              <li id="third_img"></li>
            </ul>
          </div>
        </div>
      </div>

      <!-- a 태그를 통한 사이트 특정 위치 앵커작업 -->
      <a name="nextButton"></a>

      <!-- progress 태그를 활용한 설문 진행률 bar 구현 작업 -->
      <div id="progress">
        <span id="percent">60%</span>
        <progress id="prg_bar" value="60" min="0" max="100"></progress>
      </div>

      <!-- contents 영역 -->
      <div id="contents_wrap">
        <div id="contents">
          <div id="question">
            <ul id="statement">
              <li id="q1" class="checked">
                <p>친구에게 먼저 만나자고 연락하는 편이다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q2" class="unchecked">
                <p>
                  계획에 차질이 생기면 최대한 빨리 계획으로 돌아가기 위해
                  노력한다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q3" class="unchecked">
                <p>오래 전의 실수를 후회할 때가 많다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q4" class="unchecked">
                <p>인간의 존재와 삶의 이유에 대해 깊이 생각하지 않는 편이다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q5" class="unchecked">
                <p>감정을 조절하기 보다는 감정에 휘둘리는 편이다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q6" class="unchecked">
                <p>
                  상대방의 잘못이라는 것이 명백할 때도 상대방의 체면을 살려주기
                  위해 노력한다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q7" class="unchecked">
                <p>
                  계획에 따라 일관성 있게 업무를 진행하기 보다는 즉흥적인
                  에너지로 업무를 몰아서 처리하는 편이다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey7"
                        id="sel7-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel7-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q8" class="unchecked">
                <p>
                  상대방이 자신을 높게 평가하면 나중에 상대방이 실망하게 될까
                  걱정하곤 한다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey8"
                        id="sel8-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel8-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q9" class="unchecked">
                <p>대부분의 시간을 혼자서 일할 수 있는 직업을 원한다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey9"
                        id="sel9-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel9-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q10" class="unchecked">
                <p>
                  철학적인 질문에 대해 깊게 생각하는 일은 시간 낭비라고
                  생각한다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey10"
                        id="sel10-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel10-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q11" class="unchecked">
                <p>
                  조용하고 사적인 장소보다는 사람들로 붐비고 떠들썩한 장소를
                  좋아한다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey11"
                        id="sel11-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel11-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q12" class="unchecked">
                <p>상대방의 감정을 바로 알아차릴 수 있다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey12"
                        id="sel12-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel12-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
            </ul>
          </div>
          <div id="next_question">
            <a href="/mbti/survey5.html#submitButton">
              <button class="nextBtn">
                <span>다음</span>
                <span class="arrow">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    role="img"
                    viewBox="0 0 48 48"
                    aria-labelledby="next_arrow"
                  >
                    <title id="next_arrow">다음</title>
                    <path
                      data-v-339f1828=""
                      d="M23.446875,3.571875 L21.590625,5.428125 C21.15,5.86875 21.15,6.58125 21.590625,7.021875 L36.13125,21.5625 L4.125,21.5625 C3.50625,21.5625 3,22.06875 3,22.6875 L3,25.3125 C3,25.93125 3.50625,26.4375 4.125,26.4375 L36.13125,26.4375 L21.590625,40.978125 C21.15,41.41875 21.15,42.13125 21.590625,42.571875 L23.446875,44.428125 C23.8875,44.86875 24.6,44.86875 25.040625,44.428125 L44.671875,24.796875 C45.1125,24.35625 45.1125,23.64375 44.671875,23.203125 L25.040625,3.571875 C24.6,3.13125 23.8875,3.13125 23.446875,3.571875 Z"
                    ></path>
                  </svg>
                </span>
              </button>
            </a>
          </div>
        </div>
      </div>

      <!-- footer 영역 -->
      <div id="footer_wrap">
        <div id="footer">
          <div class="footer__copyright">
            ©2011-2022 NERIS Analytics Limited
          </div>
          <div id="footer_links">
            <a
              href="https://www.16personalities.com/contact-us"
              class="link--inline"
              >Contact</a
            >
            <a
              href="https://www.16personalities.com/orders/testimonials"
              class="link--inline hide--checkout"
              >Testimonials</a
            >
            <a href="https://www.16personalities.com/terms" class="link--inline"
              >Terms & Conditions</a
            >
            <a
              href="https://www.16personalities.com/terms/privacy"
              class="link--inline last--checkout"
              >Privacy Policy</a
            >
            <a
              href="https://www.16personalities.com/tools/teams"
              class="link--inline hide--checkout"
              >For Teams</a
            >
          </div>
          <div class="translation-alert">
            <strong>Disclaimer</strong>
            : All non-English versions of the website contain automated
            translations or translations submitted by our users. They are not
            binding in any way, are not guaranteed to be accurate, and have no
            legal effect. The official text is the
            <a href="#" class="with-border">English version</a>
            of the website. Please consider reporting inaccuracies to
            <a href="mailto:support@16personalities.com" class="with-border"
              >support@16personalities.com</a
            >
            or join our
            <a
              href="https://www.16personalities.com/translations"
              class="with-border"
              >translation project</a
            >!
          </div>
        </div>
      </div>
    </div>
    <script src="/public/js/survey4.js" type="text/javascript"></script>
  </body>
</html>

 

 

survey5.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/public/css/color.css" />
  </head>
  <body>
    <div id="wrap">
      <!-- header 영역 -->
      <div id="header_wrap">
        <div id="header">
          <h1>
            <a href="/main.html">
              <img
                src="https://static.neris-assets.com/images/system/logo.svg"
                alt="site_logo"
              />
            </a>
          </h1>
          <ul>
            <li>
              <a href="/mbti/survey1.html">
                <span>성격 유형 검사</span>
              </a>
            </li>
            <li>
              <a
                href="https://www.16personalities.com/ko/%EC%84%B1%EA%B2%A9-%EC%9C%A0%ED%98%95"
              >
                <span>성격 유형</span>
              </a>
            </li>
            <li>
              <a
                href="https://www.16personalities.com/ko/%EC%97%B0%EB%9D%BD%EC%B2%98"
              >
                <span>연락처</span>
              </a>
            </li>
          </ul>
          <a href="">
            <span>
              <img
                src="https://static.neris-assets.com/images/international/flags/kr.svg"
                alt="태극기"
              />
            </span>
            <span>한국어</span>
          </a>
        </div>
      </div>

      <!-- visual 영역 -->
      <div id="visual_wrap">
        <div id="visual">
          <h1>무료 성격유형검사</h1>
          <div id="mark">
            NERIS Type Explorer
            <sup>®</sup>
          </div>
          <div id="notice">
            <div id="tips">
              <div class="tip" id="first">
                <div class="text">
                  <span class="title">총 검사 시간은 12분 내외입니다.</span>
                </div>
              </div>

              <div class="tip" id="second">
                <div class="text">
                  <span class="title">
                    혹 질문이 마음에 들지 않더라도 정직하게 답변하십시오.
                  </span>
                </div>
              </div>

              <div class="tip" id="third">
                <div class="text">
                  <span class="title">
                    가능하면 답변 시 '중립'을 선택하지 마십시오.
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div id="shape_wrap">
            <ul id="shape">
              <li id="first_img"></li>
              <li id="second_img"></li>
              <li id="third_img"></li>
            </ul>
          </div>
        </div>
      </div>

      <!-- a 태그를 통한 사이트 특정 위치 앵커작업 -->
      <a name="submitButton"></a>

      <!-- progress 태그를 활용한 설문 진행률 bar 구현 작업 -->
      <div id="progress">
        <span id="percent">80%</span>
        <progress id="prg_bar" value="80" min="0" max="100"></progress>
      </div>

      <!-- contents 영역 -->
      <div id="contents_wrap">
        <div id="contents">
          <div id="question">
            <ul id="statement">
              <li id="q1" class="checked">
                <p>무엇인가에 압도당하는 기분을 느낄 때가 많다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey1"
                        id="sel1-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel1-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q2" class="unchecked">
                <p>단계를 건너뛰는 일 없이 절차대로 일을 완수하는 편이다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey2"
                        id="sel2-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel2-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q3" class="unchecked">
                <p>
                  논란이 되거나 논쟁을 불러일으킬 수 있는 주제에 관심이 많다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey3"
                        id="sel3-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel3-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q4" class="unchecked">
                <p>
                  자신보다 다른 사람에게 더 필요한 기회라고 생각되면 기회를
                  포기할 수도 있다.
                </p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey4"
                        id="sel4-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel4-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q5" class="unchecked">
                <p>마감 기한을 지키기가 힘들다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey5"
                        id="sel5-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel5-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
              <li id="q6" class="unchecked">
                <p>일이 원하는대로 진행될 것이라는 자신감이 있다.</p>
                <div id="radioSelect">
                  <div class="agree">동의</div>
                  <div id="options">
                    <div class="agree high_agree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-1"
                        value="7"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-1">✔️</label> -->
                    </div>
                    <div class="agree half_agree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-2"
                        value="6"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-2">✔️</label> -->
                    </div>
                    <div class="agree low_agree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-3"
                        value="5"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-3">✔️</label> -->
                    </div>
                    <div class="neutral">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-4"
                        value="4"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-4">✔️</label> -->
                    </div>
                    <div class="disagree low_disagree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-5"
                        value="3"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-5">✔️</label> -->
                    </div>
                    <div class="disagree half_disagree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-6"
                        value="2"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-6">✔️</label> -->
                    </div>
                    <div class="disagree high_disagree">
                      <input
                        type="radio"
                        name="survey6"
                        id="sel6-7"
                        value="1"
                        onclick="checkedHandler(event)"
                      />
                      <!-- <label for="sel6-7">✔️</label> -->
                    </div>
                  </div>
                  <div class="disagree">비동의</div>
                </div>
              </li>
            </ul>
          </div>
          <div id="last_question">
            <button class="submitBtn">
              <span>제출</span>
              <span class="arrow">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  role="img"
                  viewBox="0 0 48 48"
                  aria-labelledby="next_arrow"
                >
                  <title id="next_arrow">다음</title>
                  <path
                    data-v-339f1828=""
                    d="M23.446875,3.571875 L21.590625,5.428125 C21.15,5.86875 21.15,6.58125 21.590625,7.021875 L36.13125,21.5625 L4.125,21.5625 C3.50625,21.5625 3,22.06875 3,22.6875 L3,25.3125 C3,25.93125 3.50625,26.4375 4.125,26.4375 L36.13125,26.4375 L21.590625,40.978125 C21.15,41.41875 21.15,42.13125 21.590625,42.571875 L23.446875,44.428125 C23.8875,44.86875 24.6,44.86875 25.040625,44.428125 L44.671875,24.796875 C45.1125,24.35625 45.1125,23.64375 44.671875,23.203125 L25.040625,3.571875 C24.6,3.13125 23.8875,3.13125 23.446875,3.571875 Z"
                  ></path>
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>

      <!-- footer 영역 -->
      <div id="footer_wrap">
        <div id="footer">
          <div class="footer__copyright">
            ©2011-2022 NERIS Analytics Limited
          </div>
          <div id="footer_links">
            <a
              href="https://www.16personalities.com/contact-us"
              class="link--inline"
              >Contact</a
            >
            <a
              href="https://www.16personalities.com/orders/testimonials"
              class="link--inline hide--checkout"
              >Testimonials</a
            >
            <a href="https://www.16personalities.com/terms" class="link--inline"
              >Terms & Conditions</a
            >
            <a
              href="https://www.16personalities.com/terms/privacy"
              class="link--inline last--checkout"
              >Privacy Policy</a
            >
            <a
              href="https://www.16personalities.com/tools/teams"
              class="link--inline hide--checkout"
              >For Teams</a
            >
          </div>
          <div class="translation-alert">
            <strong>Disclaimer</strong>
            : All non-English versions of the website contain automated
            translations or translations submitted by our users. They are not
            binding in any way, are not guaranteed to be accurate, and have no
            legal effect. The official text is the
            <a href="#" class="with-border">English version</a>
            of the website. Please consider reporting inaccuracies to
            <a href="mailto:support@16personalities.com" class="with-border"
              >support@16personalities.com</a
            >
            or join our
            <a
              href="https://www.16personalities.com/translations"
              class="with-border"
              >translation project</a
            >!
          </div>
        </div>
      </div>
    </div>
    <script src="/public/js/survey5.js" type="text/javascript"></script>
  </body>
</html>