-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest2(R).html
123 lines (111 loc) · 5.33 KB
/
test2(R).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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>픽토그램 맞추기</title>
</head>
<style>
html{
font-size: 20px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
body {
text-align: center;
margin-top: 50px;
background-color: black;
}
h1 {
text-align: center;
}
img {
width: 100px;
height: auto;
display: inline-block;
margin: 10px;
cursor: pointer;
}
.selected {
border: 5px solid red;
border-radius: 8px;
}
.rounded-rectangle {
display: inline-block;
text-align: center;
width: 650px; /* 너비 설정 */
height: 700px; /* 높이 설정 */
background-color: white; /* 배경 색상 설정 */
border-radius: 30px; /* 둥근 사각형을 만들기 위한 테두리 반경 설정 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 효과 설정 */
}
</style>
<body>
<div class="rounded-rectangle">
<h1 style="color: red;" >앞 서 나온 픽토그램 기억하기</h1>
<div id="imageContainer"></div>
<button id="button1" style="padding: 10px; border-radius: 8px; border: 5px solid black;"><h1>시작</h1></button>
<button id="button2" style="padding: 10px; border-radius: 8px; border: 5px solid black;"><h1>정답 확인</h1></button>
<p id="message"></p>
<!-- 여기에 내용을 추가할 수 있습니다. -->
</div>
</body>
<script>
const $button1 = document.querySelector("#button1")
const $button2 = document.querySelector("#button2")
const realImages = [
"경로석.png","임산부 배려석.png","휴대폰 진동사용.png",
"휴대폰 사용금지.png","지하철.png","환승센터.png"
]; //위 이미지 중에 있는 것을 고른 것이 정답, 마지막에 배열에서 같은 것이 있는지 찾기만 하여 참과 거짓 판단하는 배열 문자 쓰기!
// 모든 이미지
const allImages = [
"경로석.png","기차.png","남녀.png",
"노약자.png","임산부 배려석.png","지하철.png",
"환승센터.png","휴대폰 사용금지.png","휴대폰 진동사용.png"
];
let selectedImages = []; // 선택한 이미지 소스를 저장할 배열
function startRadomDisplay() {
const randomImages = allImages; // 이미지 배열을 복사해 옴
randomImages.sort(() => Math.random() - 0.5); // 배열을 랜덤하게 섞음 !!0.5?
const displayedImages = randomImages.slice(0, 5); // 첫 5개의 이미지만 선택
const imageContainer = document.getElementById("imageContainer");
imageContainer.innerHTML = ''; // 이미지 초기화 !!innerHTML?
selectedImages = []; // 선택한 이미지 배열 초기화
displayedImages.forEach((image,index,Array) => {
const imgElement = document.createElement('img'); // 새로운 사진 요소 태그
imgElement.src = image; // 랜덤으로 뽑은 이미지
imgElement.addEventListener('click', selectImage); // 클릭 이벤트 리스너 추가
imageContainer.append(imgElement); // 이미지 컨테이너에 이미지 추가
//console.log(imgElement.src)
});
};
function selectImage(event) {
const imgElement = event.target; // 클릭된 이미지 요소
const imageSrc = imgElement.src; // 이미지 소스에서 파일명만 추출
//console.log(imageSrc);
if (selectedImages.includes(imageSrc)) {
selectedImages = selectedImages.filter(src => src !== imageSrc); // 배열에서 이미지 소스 제거
imgElement.classList.remove('selected'); // 테두리 제거
} else {
selectedImages.push(imageSrc); // 배열에 이미지 소스 추가
imgElement.classList.add('selected'); // 테두리 추가
}
console.log('선택된 배열: ', selectedImages); // 선택된 이미지를 콘솔에 출력
};
function checkImages(event) {
if (selectedImages.some(i=>["http://127.0.0.1:5502/%EB%85%B8%EC%95%BD%EC%9E%90.png","http://127.0.0.1:5502/%EA%B8%B0%EC%B0%A8.png","http://127.0.0.1:5502/%EB%82%A8%EB%85%80.png"].includes(i))===true) {
const message="틀렸습니다."
document.getElementById('message').textContent = message;
}else if (selectedImages.length===0) {
alert('사진을 선택해주세요');//사진이 선택 되지 않았을 때
}else{
const message="맞았습니다."
document.getElementById('message').textContent = message;
const imageContainer = document.getElementById("imageContainer");
imageContainer.innerHTML = ''; // 이미지 초기화 !!innerHTML?
selectedImages = []; // 선택한 이미지 배열 초기화
}
};
$button1.addEventListener('click', startRadomDisplay);
$button2.addEventListener('click', checkImages);
</script>
</html>