-
Notifications
You must be signed in to change notification settings - Fork 2
/
category(quiz).html
166 lines (148 loc) · 5.23 KB
/
category(quiz).html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!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>퀴즈 포스트잇 모음집</title>
<link rel="stylesheet" href="./css/common.css" />
<link rel="stylesheet" href="./css/category.css" />
<script src="./js/changeImage.js"></script>
<style>
.rectangle {
cursor: pointer;
transition: transform 0.5s;
}
</style>
</head>
<script>
function changeImage(buttonId, imagePath) {
var button = document.getElementById(buttonId);
var image = button.querySelector("img");
image.src = imagePath;
}
</script>
<body>
<div class="title"><strong>퀴즈</strong></div>
<button
class="custom-button"
id="button1"
value="1"
onclick="fetchQuizImportance(1); changeImage('button1', 'images/imp1_press.svg')">
<img src="images/Group 15.svg" alt="Button 1" />
</button>
<button
class="custom-button"
id="button2"
value="2"
onclick="fetchQuizImportance(2); changeImage('button2', 'images/imp2_press.svg')">
<img src="images/Group 16.svg" alt="Button 2" />
</button>
<button
class="custom-button"
id="button3"
value="3"
onclick="fetchQuizImportance(3); changeImage('button3', 'images/imp3_press.svg')">
<img src="images/Group 17.svg" alt="Button 3" />
</button>
<div class="option">
<select id="sortDropdown" onchange="toggleOptions()">
<option value="0">중요도</option>
<option value="1">오름차순</option>
<option value="2">내림차순</option>
</select>
</div>
<div class="rectangles" id="rectangleContainer">
<!-- 동적으로 생성될 엘리먼트들이 들어갈 컨테이너 -->
</div>
<div class="widget">
<a class="image-button" href="home.html"
><img src="images/home.png" alt="이미지 1"
/></a>
<a class="image-button" href="category(concept).html"
><img src="images/개념.png" alt="이미지 2"
/></a>
<a class="image-button" href="category(quiz).html"
><img src="images/퀴즈.png" alt="이미지 3"
/></a>
<a class="image-button" href="category(wronganswer).html"
><img src="images/오답.png" alt="이미지 4"
/></a>
</div>
<script>
async function toggleOptions() {
var sortDropdown = document.getElementById("sortDropdown");
var selectedValue = sortDropdown.value;
if (selectedValue == 1) {
fetchQuizSort("asc");
} else if (selectedValue == 2) {
fetchQuizSort("desc");
}
}
let clientToken; // 토큰 값을 저장할 변수
async function getToken() {
try {
const response = await fetch("http://localhost:3000/token");
if (!response.ok) {
throw new Error("네트워크 응답이 올바르지 않습니다");
}
const data = await response.json();
clientToken = data.token; // 토큰 값 설정
} catch (error) {
console.error("토큰을 가져오는 중 오류 발생:", error);
throw error;
}
}
function createRectangle(question, description) {
const rectangle = document.createElement("div");
rectangle.classList.add("rectangle");
rectangle.textContent = question;
let isFlipped = false; // 사각형의 현재 상태 추적
rectangle.addEventListener("click", function () {
if (isFlipped) {
rectangle.style.transform = "scaleX(1)";
rectangle.textContent = question;
} else {
rectangle.style.transform = "scaleX(1)";
rectangle.textContent = "";
const descText = document.createTextNode(description);
rectangle.appendChild(descText);
}
isFlipped = !isFlipped; // 상태 반전
});
document.getElementById("rectangleContainer").appendChild(rectangle);
}
function fetchData(endpoint, order = "", importance = "") {
const serverUrl = "http://localhost:3000";
const query = `?token=${clientToken}${order ? `&order=${order}` : ""}${
importance ? `&importance=${importance}` : ""
}`;
fetch(`${serverUrl}${endpoint}${query}`)
.then((response) => response.json())
.then((data) => {
const container = document.getElementById("rectangleContainer");
container.innerHTML = "";
data.forEach((item) => {
createRectangle(item.question, item.description);
});
})
.catch((error) => {
console.error("데이터를 가져오는 중 오류 발생:", error);
});
}
async function fetchQuizList() {
await getToken();
fetchData("/quiz-list");
}
async function fetchQuizImportance(importance) {
await getToken();
fetchData("/quiz-importance", "", importance);
}
async function fetchQuizSort(order) {
await getToken();
fetchData("/quiz-sort", order);
}
fetchQuizList();
</script>
</body>
</html>