강의를 다 들어서 뭘 할까 고민하다가 리액트 퀘스트도 한 번 풀어보고 싶어서 도전! 퀘스트에서 주어진 코드에서 문제를 해결하고 완성 코드에 내가 좀 더 디벨롭해서 만들어볼 예정이다!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MBTI테스트</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>MBTI 테스트</h1>
<form id="quiz-form">
<div class="question">
<p>아침에 일어나자마자 가장 먼저 하는 일은?</p>
<label><input type="radio" name="q1" value="E"> 휴대폰 확인하기</label>
<label><input type="radio" name="q1" value="I"> 커피 마시기</label>
<label><input type="radio" name="q1" value="S"> 운동하기</label>
<label><input type="radio" name="q1" value="N"> 잠 더 자기</label>
</div>
<div class="question">
<p>주말에 주로 하는 일은?</p>
<label><input type="radio" name="q2" value="E"> 친구 만나기</label>
<label><input type="radio" name="q2" value="I"> 집에서 쉬기</label>
<label><input type="radio" name="q2" value="S"> 여행 가기</label>
<label><input type="radio" name="q2" value="N"> 취미 활동 하기</label>
</div>
<div class="question">
<p>일을 할 때 가장 중요한 것은?</p>
<label><input type="radio" name="q3" value="T"> 효율성</label>
<label><input type="radio" name="q3" value="F"> 팀워크</label>
<label><input type="radio" name="q3" value="J"> 계획성</label>
<label><input type="radio" name="q3" value="P"> 유연성</label>
</div>
<!-- 추가 질문 -->
<div class="question">
<p>스트레스를 받을 때 주로 하는 행동은?</p>
<label><input type="radio" name="q4" value="E"> 친구와 대화하기</label>
<label><input type="radio" name="q4" value="I"> 혼자만의 시간을 갖기</label>
<label><input type="radio" name="q4" value="T"> 문제를 분석하며 해결책 찾기</label>
<label><input type="radio" name="q4" value="F"> 감정을 표현하며 풀기</label>
</div>
<div class="question">
<p>새로운 프로젝트를 시작할 때 어떻게 접근하나요?</p>
<label><input type="radio" name="q5" value="J"> 계획을 철저히 세운다</label>
<label><input type="radio" name="q5" value="P"> 유연하게 진행하며 수정한다</label>
<label><input type="radio" name="q5" value="S"> 현실적인 목표를 설정한다</label>
<label><input type="radio" name="q5" value="N"> 창의적인 아이디어를 우선 고려한다</label>
</div>
<div class="question">
<p>모임에서 당신의 모습은?</p>
<label><input type="radio" name="q6" value="E"> 사람들과 적극적으로 대화한다</label>
<label><input type="radio" name="q6" value="I"> 조용히 관찰하거나 대화에 적게 참여한다</label>
<label><input type="radio" name="q6" value="T"> 대화의 논리적 흐름을 중요하게 생각한다</label>
<label><input type="radio" name="q6" value="F"> 대화 중 감정적 교감을 중시한다</label>
</div>
<button id="submit-button" type="button">결과 확인하기</button>
</form>
<div id="result" class="hide">
<h2>당신의 성격 유형은?</h2>
<p id="result-text">결과가 여기에 표시됩니다.</p>
<button>다시 시작하기</button>
</div>
</div>
</body>
</html>
📖 코드 리뷰
✔️ CSS 파일 연결하기
☑️ 아래의 코드를 통해 styles.css와 연결하여 css를 적용하였다.
<link rel="stylesheet" href="styles.css">
- 적용하기 전
✔️ 고유한 name 속성 부여하기
☑️ 각 질문에 고유한 name 속성을 부여함으로써 사용자가 각 질문에 대한 답변을 개별적으로 선택할 수 있도록 한다.
☑️ 이를 통해 각 질문의 라디오 버튼이 독자적으로 작동할 수 있게 된다.
<label><input type="radio" name="q1" value="E"> 휴대폰 확인하기</label>
✔️ mbti 계산하기
☑️ 각 질문에는 value 값이 있는데, 해당 value의 대답을 선택하면 이를 script.js 파일에서 해당 value에 1점을 부과한다.
☑️ 이를 통해 가장 점수가 높은 value의 mbti가 출력된다.
<label><input type="radio" name="q1" value="E"> 휴대폰 확인하기</label>
✔️ 추가 질문
☑️ 위의 mbti 계산법에 따라 추가질문을 작성하였다.
<!-- 추가 질문 --> 아래의 항목들
