Hugging Face's logo

Spaces:
Kims12
/
MBTI_HTML
Running

App Files Community
Kims12 commited on
Commit
751d683
·
verified ·
1 Parent(s): f36acd7

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +30 -19
index.html CHANGED
@@ -5,11 +5,14 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>MBTI 성격 유형 테스트</title>
7
  <link rel="stylesheet" href="style.css">
 
 
8
  </head>
9
  <body>
10
  <div class="container">
11
  <h1>MBTI 성격 유형 테스트</h1>
12
  <form id="mbti-form">
 
13
  <div class="page" id="page-1">
14
  <h2>1-5번 질문</h2>
15
  <div class="question">
@@ -20,7 +23,6 @@
20
  <label><input type="radio" name="q1" value="아니다"> 아니다</label>
21
  <label><input type="radio" name="q1" value="매우 아니다"> 매우 아니다</label>
22
  </div>
23
- <!-- 질문 2부터 5까지 동일한 형식으로 추가 -->
24
  <div class="question">
25
  <p>2. 당신은 계획을 세우는 것을 좋아하나요?</p>
26
  <label><input type="radio" name="q2" value="매우 그렇다" required> 매우 그렇다</label>
@@ -53,9 +55,12 @@
53
  <label><input type="radio" name="q5" value="아니다"> 아니다</label>
54
  <label><input type="radio" name="q5" value="매우 아니다"> 매우 아니다</label>
55
  </div>
56
- <button type="button" class="next-button" onclick="nextPage(1)">다음</button>
 
 
57
  </div>
58
 
 
59
  <div class="page" id="page-2" style="display: none;">
60
  <h2>6-10번 질문</h2>
61
  <div class="question">
@@ -66,7 +71,6 @@
66
  <label><input type="radio" name="q6" value="아니다"> 아니다</label>
67
  <label><input type="radio" name="q6" value="매우 아니다"> 매우 아니다</label>
68
  </div>
69
- <!-- 질문 7부터 10까지 동일한 형식으로 추가 -->
70
  <div class="question">
71
  <p>7. 당신은 일을 끝내기 전에 계획을 세우는 편인가요?</p>
72
  <label><input type="radio" name="q7" value="매우 그렇다" required> 매우 그렇다</label>
@@ -99,10 +103,13 @@
99
  <label><input type="radio" name="q10" value="아니다"> 아니다</label>
100
  <label><input type="radio" name="q10" value="매우 아니다"> 매우 아니다</label>
101
  </div>
102
- <button type="button" class="prev-button" onclick="prevPage(2)">이전</button>
103
- <button type="button" class="next-button" onclick="nextPage(2)">다음</button>
 
 
104
  </div>
105
 
 
106
  <div class="page" id="page-3" style="display: none;">
107
  <h2>11-15번 질문</h2>
108
  <div class="question">
@@ -113,7 +120,6 @@
113
  <label><input type="radio" name="q11" value="아니다"> 아니다</label>
114
  <label><input type="radio" name="q11" value="매우 아니다"> 매우 아니다</label>
115
  </div>
116
- <!-- 질문 12부터 15까지 동일한 형식으로 추가 -->
117
  <div class="question">
118
  <p>12. 당신은 결정을 내릴 때 직감을 신뢰하나요?</p>
119
  <label><input type="radio" name="q12" value="매우 그렇다" required> 매우 그렇다</label>
@@ -146,10 +152,13 @@
146
  <label><input type="radio" name="q15" value="아니다"> 아니다</label>
147
  <label><input type="radio" name="q15" value="매우 아니다"> 매우 아니다</label>
148
  </div>
149
- <button type="button" class="prev-button" onclick="prevPage(3)">이전</button>
150
- <button type="button" class="next-button" onclick="nextPage(3)">다음</button>
 
 
151
  </div>
152
 
 
153
  <div class="page" id="page-4" style="display: none;">
154
  <h2>16-20번 질문</h2>
155
  <div class="question">
@@ -160,7 +169,6 @@
160
  <label><input type="radio" name="q16" value="아니다"> 아니다</label>
161
  <label><input type="radio" name="q16" value="매우 아니다"> 매우 아니다</label>
162
  </div>
163
- <!-- 질문 17부터 20까지 동일한 형식으로 추가 -->
164
  <div class="question">
165
  <p>17. 당신은 자연스럽게 리더 역할을 맡게 되나요?</p>
166
  <label><input type="radio" name="q17" value="매우 그렇다" required> 매우 그렇다</label>
@@ -193,8 +201,10 @@
193
  <label><input type="radio" name="q20" value="아니다"> 아니다</label>
194
  <label><input type="radio" name="q20" value="매우 아니다"> 매우 아니다</label>
195
  </div>
196
- <button type="button" class="prev-button" onclick="prevPage(4)">이전</button>
197
- <button type="submit" class="submit-button">결과 보기</button>
 
 
198
  </div>
199
  </form>
200
  </div>
@@ -486,7 +496,7 @@
486
  }
487
 
488
  responses.forEach(response => {
489
- mbtiTypesKeys = Object.keys(mbtiTypes);
490
  mbtiTypesKeys.forEach(type => {
491
  if (response === "매우 그렇다") {
492
  scores[type] += getRandomInt(5, 10);
@@ -531,24 +541,25 @@
531
  const resultText = document.getElementById('result-text');
532
  const resultImage = document.getElementById('result-image');
533
 
534
- let result = `당신의 MBTI 유형은 <strong>${mbtiType}</strong>입니다. 신뢰도: <strong>${percentage}%</strong><br><br>`;
535
- result += `성격 설명: ${mbtiTypes[mbtiType]['성격']}<br>`;
536
- result += `추천 직업: ${mbtiTypes[mbtiType]['직업']}<br><br>`;
537
 
538
  // 좋은 궁합
539
- result += `<strong>좋은 궁합:</strong><br>`;
540
  mbtiTypes[mbtiType]['궁합'].forEach(match => {
541
- result += `- ${match}: ${mbtiTypes[mbtiType]['궁합 설명'][match]}<br>`;
542
  });
543
 
544
  // 나쁜 궁합
545
- result += `<br><strong>나쁜 궁합:</strong><br>`;
546
  mbtiTypes[mbtiType]['나쁜 궁합'].forEach(match => {
547
- result += `- ${match}: ${mbtiTypes[mbtiType]['나쁜 궁합 설명'][match]}<br>`;
548
  });
549
 
550
  resultText.innerHTML = result;
551
  resultImage.src = `${mbtiType}.webp`;
 
552
  form.style.display = 'none';
553
  resultPage.style.display = 'block';
554
  window.scrollTo(0, 0);
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>MBTI 성격 유형 테스트</title>
7
  <link rel="stylesheet" href="style.css">
8
+ <!-- Google Fonts 추가 -->
9
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
10
  </head>
11
  <body>
12
  <div class="container">
13
  <h1>MBTI 성격 유형 테스트</h1>
14
  <form id="mbti-form">
15
+ <!-- 페이지 1 -->
16
  <div class="page" id="page-1">
17
  <h2>1-5번 질문</h2>
18
  <div class="question">
 
23
  <label><input type="radio" name="q1" value="아니다"> 아니다</label>
24
  <label><input type="radio" name="q1" value="매우 아니다"> 매우 아니다</label>
25
  </div>
 
26
  <div class="question">
27
  <p>2. 당신은 계획을 세우는 것을 좋아하나요?</p>
28
  <label><input type="radio" name="q2" value="매우 그렇다" required> 매우 그렇다</label>
 
55
  <label><input type="radio" name="q5" value="아니다"> 아니다</label>
56
  <label><input type="radio" name="q5" value="매우 아니다"> 매우 아니다</label>
57
  </div>
58
+ <div class="buttons clearfix">
59
+ <button type="button" class="next-button" onclick="nextPage(1)">다음</button>
60
+ </div>
61
  </div>
62
 
63
+ <!-- 페이지 2 -->
64
  <div class="page" id="page-2" style="display: none;">
65
  <h2>6-10번 질문</h2>
66
  <div class="question">
 
71
  <label><input type="radio" name="q6" value="아니다"> 아니다</label>
72
  <label><input type="radio" name="q6" value="매우 아니다"> 매우 아니다</label>
73
  </div>
 
74
  <div class="question">
75
  <p>7. 당신은 일을 끝내기 전에 계획을 세우는 편인가요?</p>
76
  <label><input type="radio" name="q7" value="매우 그렇다" required> 매우 그렇다</label>
 
103
  <label><input type="radio" name="q10" value="아니다"> 아니다</label>
104
  <label><input type="radio" name="q10" value="매우 아니다"> 매우 아니다</label>
105
  </div>
106
+ <div class="buttons clearfix">
107
+ <button type="button" class="prev-button" onclick="prevPage(2)">이전</button>
108
+ <button type="button" class="next-button" onclick="nextPage(2)">다음</button>
109
+ </div>
110
  </div>
111
 
112
+ <!-- 페이지 3 -->
113
  <div class="page" id="page-3" style="display: none;">
114
  <h2>11-15번 질문</h2>
115
  <div class="question">
 
120
  <label><input type="radio" name="q11" value="아니다"> 아니다</label>
121
  <label><input type="radio" name="q11" value="매우 아니다"> 매우 아니다</label>
122
  </div>
 
123
  <div class="question">
124
  <p>12. 당신은 결정을 내릴 때 직감을 신뢰하나요?</p>
125
  <label><input type="radio" name="q12" value="매우 그렇다" required> 매우 그렇다</label>
 
152
  <label><input type="radio" name="q15" value="아니다"> 아니다</label>
153
  <label><input type="radio" name="q15" value="매우 아니다"> 매우 아니다</label>
154
  </div>
155
+ <div class="buttons clearfix">
156
+ <button type="button" class="prev-button" onclick="prevPage(3)">이전</button>
157
+ <button type="button" class="next-button" onclick="nextPage(3)">다음</button>
158
+ </div>
159
  </div>
160
 
161
+ <!-- 페이지 4 -->
162
  <div class="page" id="page-4" style="display: none;">
163
  <h2>16-20번 질문</h2>
164
  <div class="question">
 
169
  <label><input type="radio" name="q16" value="아니다"> 아니다</label>
170
  <label><input type="radio" name="q16" value="매우 아니다"> 매우 아니다</label>
171
  </div>
 
172
  <div class="question">
173
  <p>17. 당신은 자연스럽게 리더 역할을 맡게 되나요?</p>
174
  <label><input type="radio" name="q17" value="매우 그렇다" required> 매우 그렇다</label>
 
201
  <label><input type="radio" name="q20" value="아니다"> 아니다</label>
202
  <label><input type="radio" name="q20" value="매우 아니다"> 매우 아니다</label>
203
  </div>
204
+ <div class="buttons clearfix">
205
+ <button type="button" class="prev-button" onclick="prevPage(4)">이전</button>
206
+ <button type="submit" class="submit-button">결과 보기</button>
207
+ </div>
208
  </div>
209
  </form>
210
  </div>
 
496
  }
497
 
498
  responses.forEach(response => {
499
+ const mbtiTypesKeys = Object.keys(mbtiTypes);
500
  mbtiTypesKeys.forEach(type => {
501
  if (response === "매우 그렇다") {
502
  scores[type] += getRandomInt(5, 10);
 
541
  const resultText = document.getElementById('result-text');
542
  const resultImage = document.getElementById('result-image');
543
 
544
+ let result = `<p>당신의 MBTI 유형은 <strong>${mbtiType}</strong>입니다. 신뢰도: <strong>${percentage}%</strong></p>`;
545
+ result += `<h3>성격 설명</h3><p>${mbtiTypes[mbtiType]['성격']}</p>`;
546
+ result += `<h3>추천 직업</h3><p>${mbtiTypes[mbtiType]['직업']}</p>`;
547
 
548
  // 좋은 궁합
549
+ result += `<h3>좋은 궁합</h3>`;
550
  mbtiTypes[mbtiType]['궁합'].forEach(match => {
551
+ result += `<p><strong>${match}:</strong> ${mbtiTypes[mbtiType]['궁합 설명'][match]}</p>`;
552
  });
553
 
554
  // 나쁜 궁합
555
+ result += `<h3>나쁜 궁합</h3>`;
556
  mbtiTypes[mbtiType]['나쁜 궁합'].forEach(match => {
557
+ result += `<p><strong>${match}:</strong> ${mbtiTypes[mbtiType]['나쁜 궁합 설명'][match]}</p>`;
558
  });
559
 
560
  resultText.innerHTML = result;
561
  resultImage.src = `${mbtiType}.webp`;
562
+ resultImage.alt = `${mbtiType} 이미지`;
563
  form.style.display = 'none';
564
  resultPage.style.display = 'block';
565
  window.scrollTo(0, 0);