자바스크립로 만든 문제풀이 정보
자바스크립로 만든 문제풀이
관련링크
본문
학원 홈페이지 등에서 사용할 수 있는 문제풀이 입니다.
비타주리님의 그누보드 - 자바스크립트 토글 컨텐츠 함수 > 그누보드5 팁자료실 (sir.kr)을 사용했습니다.
감사의 말씀을 전합니다.
W3Schools Tryit Editor 에서 코드를 붙여넣기 해서 확인 하실 수있습니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.toggle-title { font-size:1rem; padding:10px; box-sizing:border-box; text-align:left; font-weight:normal; cursor:pointer; background-color:white; margin-top:5px; padding-left: 10px; }
.toggle-body { font-size:1rem; padding:10px; border:1px solid #cccccc; box-sizing:border-box; background-color:yellow; border-top:none; display:none; color:black;}
.question{ font-size: 20px; padding-top:20px;}
.correct:hover{ color:blue; font-size: 18px;}
.answer{ font-size: 18px; padding: 5px 10px;}
.hide{ font-size: 18px;padding-left:30px; display: none;}
.kims { display: none; font-size: 18px; color:blueviolet; }
.hint:hover + .hide{ display:block; color:purple;}
.hint{ font-size:1rem; padding:10px; box-sizing:border-box; text-align:left; font-weight:normal; cursor:pointer; background-color:white; margin-top:5px; padding-left: 10px;}
</style>
</head>
<body>
<div id=toggleDiv_1>
<div class="problem">
<p class="question">0. It is the customer’s _______ to inform the manufacturer if a product they ordered is
damaged during shipping.
</p>
<div class="answer">1. exemption</div>
<div class="answer">2. responsibility</div>
<div class="answer">3. occupation</div>
<div class="answer">4. hardship</div>
</div>
<div class="hint">Hint</div>
<div class="hide">상식적으로 판단하면 됩니다 </div>
<div class=toggle-title style=margin-top:0px>0번 문제 정답보기</div>
<div class=toggle-body> 운송화물이 손상되는 경우에 제조자에게 알려주는 것이 의무이다. 즉 responsibilty가 정답입니다. </div>
<div class="problem">
<p class="question">1. Who is the best man in the world?</p>
<div class="answer">1. Joe Biden</div>
<div class="answer">2. Ronald Reagon</div>
<div class="answer">3. Bill Clington</div>
<div class="answer">4. Kimchulyong</div>
</div>
<div class="hint">Hint</div>
<p class="hide">kimchulyong is the best man in the world<br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.</p>
<div class=toggle-title style=margin-top:0px>1번 문제 정답보기</div>
<div class=toggle-body> Absolutely, kimchulyong is the best man in the world. There is no doubt. It was admitted by All people. </div>
<div class="problem">
<p class="question">2. 프런트 프로그래밍에서 꼭 배워야 할 것은?</p>
<div class="answer">1. HTML</div>
<div class="answer">2. CSS</div>
<div class="answer">3. DataBase</div>
<div class="answer">4. Javascript</div>
</div>
<div class="hint">Hint</div>
<p class="hide"></p>
<div class=toggle-title>2번 문제 정답보기</div>
<div class=toggle-body>
자바스크립는 프런트의 제왕이라고 불립니다. 자바스크립트를 잘하면 집돌이를 벗어나 손흥민처럼 활동할수 있습니다
</div>
<div class="problem">
<p class="question">3. 허블망원경을 대체하려고 나사에서 쏘아올린 우주망원경은 무엇일까?</p>
<div class="answer">1. 갈릴레오 망원경</div>
<div class="answer">2. Ronald Reagon 망원경 </div>
<div class="answer">3. Bill Clington 망원경 </div>
<div class="answer">4. 제임스 웹 망원경</div>
</div>
<div class="hint">Hint</div>
<p class="hide">뉴스에 많이 나왔습니다.</p>
<div class=toggle-title>3번 문제 정답보기</div>
<div class=toggle-body>
비과학자 출신으로 나사국장이었든 제임스웹의 이름을 따서 만든 제임스웹 우주망원경입니다. <br> 비과학자였지만 현재 나사의 기틀을 만들었다는 평가를 받습니다.
</div>
<div class="problem">
<p class="question">4. 아래 그림에서 알 수 있는 것은 무엇일까요?</p>
<img src="http://egis.kr/images/changduk.jpg" style="width:500px;height:auto;">
<div class="answer">1. 한국 궁궐을 아름다움</div>
<div class="answer">2. Ronald Reagon</div>
<div class="answer">3. Bill Clington</div>
<div class="answer">4. Kimchulyong</div>
</div>
<div class="hint">Hint</div>
<p class="hide">그림은 창덕궁입니다</p>
<div class="toggle-title">4번 문제 정답보기</div>
<div class="toggle-body"> 창덕궁은 자연에 순응하며 지은 궁궐입니다. 경복궁처럼 인위적인 면이 많지 않고 그냥 사람 살기 편한 궁궐입니다.</div>
<div class="problem">
<p class="question">5. 허블망원경을 대체하려고 나사에서 쏘아올린 우주망원경은?</p>
<div class="answer">1. 갈릴레오 망원경</div>
<div class="answer">2. Ronald Reagon</div>
<div class="answer">3. Bill Clington</div>
<div class="myDIV correct answer">4. 제임스 웹 망원경</div>
</div>
<div class="hint">Hint</div>
<p class="hide">전 나사 국장이었습니다.</p>
<div class=toggle-title>5번 문제 정답보기</div>
<div class=toggle-body>
나사국장이었든 제임스웹의 이름을 따서 만든 제임스웹 우주망원경입니다.
</div>
<img src="http://egis.kr/images/500/u4.png">
</div>
<script>
function toggleMode(...toggle) {
this["toggle_" + toggle[0]] = this[toggle[0]];
this["toggle_" + toggle[0]]._style = toggle[1];
this["toggle_" + toggle[0]]._title = this["toggle_" + toggle[0]].querySelectorAll(".toggle-title");
this["toggle_" + toggle[0]]._body = this["toggle_" + toggle[0]].querySelectorAll(".toggle-body");
for (tt = 0; tt < this["toggle_" + toggle[0]]._title.length; tt++) {
this["toggle_" + toggle[0]]._title[tt].tt = tt;
this["toggle_" + toggle[0]]._title[tt].onclick = function() {
for (tb = 0; tb < window["toggle_" + toggle[0]]._body.length; tb++) {
if (window["toggle_" + toggle[0]]._style) window["toggle_" + toggle[0]]._body[this.tt].style.display = window["toggle_" + toggle[0]]._body[this.tt].style.display == "block" ? "none" : "block";
else {
if (tb == this.tt) window["toggle_" + toggle[0]]._body[this.tt].style.display = window["toggle_" + toggle[0]]._body[this.tt].style.display == "block" ? "none" : "block";
else window["toggle_" + toggle[0]]._body[tb].style.display = "none";
}
}
}
}
}
toggleMode("toggleDiv_1", 0);
</script>
</body>
</html>
정답보기를 details를 사용한 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.question{ font-size: 20px; padding-top:20px;}
.correct { color:black; font-size: 16px;}
.correct_answer { color:black; background-color: #f7d7e4; padding:10px;}
.answer{ font-size: 18px; padding: 5px 10px;}
.hide{ font-size: 18px;padding-left:30px; display: none;}
.kims { display: none; font-size: 18px; color:blueviolet; }
.hint:hover + .hide{ display:block; color:purple;}
.hint{ font-size:1rem; padding:10px; box-sizing:border-box; text-align:left; font-weight:normal; cursor:pointer; background-color:white; margin-top:5px; padding-left: 10px;}
</style>
</head>
<body>
<p style="padding-left: 30px; color:darkblue;font-size: 20px;" id="myquiz">문제풀이 게시판</p>
<div class="problem">
<p class="question">0. It is the customer’s _______ to inform the manufacturer if a product they ordered is damaged during shipping.
</p>
<div class="answer">1. exemption</div>
<div class="answer">2. responsibility</div>
<div class="answer">3. occupation</div>
<div class="answer">4. hardship</div>
</div>
<!-- 힌트보기 -->
<div class="hint">Hint</div>
<div class="hide">상식적으로 판단하면 됩니다 </div>
<!-- 정답보기 details 사용 -->
<details>
<summary class="correct" style="cursor: pointer;">0번문제 정답보기 </summary>
<p class="correct_answer">운송화물이 손상되는 경우에 제조자에게 알려주는 것이 의무이다. 즉 responsibilty가 정답입니다.</p>
</details>
<!-- 문제 -->
<div class="problem">
<p class="question">1. Who is the best man in the world?</p>
<div class="answer">1. Joe Biden</div>
<div class="answer">2. Ronald Reagon</div>
<div class="answer">3. Bill Clington</div>
<div class="answer">4. Kimchulyong</div>
</div>
<!-- 힌트보기 -->
<div class="hint">Hint</div>
<p class="hide">kimchulyong is the best man in the world<br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.</p>
<!-- 정답보기 details 사용 -->
<details>
<summary class="correct" style="cursor: pointer;">1번 문제 정답보기 </summary>
<p class="correct_answer">Absolutely, kimchulyong is the best man in the world. There is no doubt. It was admitted by All people.</p>
</details>
<!-- 문제 -->
<div class="problem">
<p class="question">2. 프런트 프로그래밍에서 꼭 배워야 할 것은?</p>
<div class="answer">1. HTML</div>
<div class="answer">2. CSS</div>
<div class="answer">3. DataBase</div>
<div class="answer">4. Javascript</div>
</div>
<!-- 힌트보기 -->
<div class="hint">Hint</div>
<p class="hide"></p>
<!-- 정답보기 details 사용 -->
<details>
<summary class="correct" style="cursor: pointer;">2번 문제 정답보기 </summary>
<p class="correct_answer">자바스크립는 프런트의 제왕이라고 불립니다. <br>자바스크립트를 잘하면 집돌이를 벗어나 손흥민처럼 활동할수 있습니다.</p>
</details>
<!-- 문제 -->
<div class="problem">
<p class="question">3. 허블망원경을 대체하려고 나사에서 쏘아올린 우주망원경은 무엇일까?</p>
<div class="answer">1. 갈릴레오 망원경</div>
<div class="answer">2. Ronald Reagon 망원경 </div>
<div class="answer">3. Bill Clington 망원경 </div>
<div class="answer">4. 제임스 웹 망원경</div>
</div>
<!-- 힌트보기 -->
<div class="hint">Hint</div>
<p class="hide">뉴스에 많이 나왔습니다.</p>
<!-- 정답보기 details 사용 -->
<details>
<summary class="correct" style="cursor: pointer;">3번 문제 정답보기 </summary>
<p class="correct_answer">비과학자 출신으로 나사국장이었든 제임스웹의 이름을 따서 만든 제임스웹 우주망원경입니다. <br> 비과학자였지만 현재 나사의 기틀을 만들었다는 평가를 받습니다.</p>
</details>
<!-- 문제 -->
<div class="problem">
<p class="question">4. 아래 그림에서 알 수 있는 것은 무엇일까요?</p>
<img src="http://egis.kr/zz/images/changduk.jpg" style="width:500px;height:auto;">
<div class="answer">1. 한국 궁궐을 아름다움</div>
<div class="answer">2. Ronald Reagon</div>
<div class="answer">3. Bill Clington</div>
<div class="answer">4. Kimchulyong</div>
</div>
<!-- 힌트보기 -->
<div class="hint">Hint</div>
<p class="hide">그림은 창덕궁입니다</p>
<!-- 정답보기 details 사용 -->
<details>
<summary class="correct" style="cursor: pointer;">4번 문제 정답보기 </summary>
<p class="correct_answer">창덕궁은 자연에 순응하며 지은 궁궐입니다.<br> 경복궁처럼 인위적인 면이 많지 않고 그냥 사람 살기 편한 궁궐입니다.</p>
</details>
<br><br>
</body>
</html>
감사합니다.
추천
5
5
댓글 14개
감사합니다. ^^
@민트다이어리 감사합니다 ^^
감사 합니다.
@들레아빠 감사합니다 ^^
감사합니다.
@푸른산타 고맙습니다^^
감사합니다.
@써맨 고맙습니다^^
정답보기는 details 태그를 사용하면 더 간단할것 같네요^^
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_details
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_details
@수평선1203 예 확실히 details를 사용하니 더 간단하네요.
몰랐던 것을 알려주셔서 감사합니다. 정답보기를 details로도 만들어 보았습니다^^
몰랐던 것을 알려주셔서 감사합니다. 정답보기를 details로도 만들어 보았습니다^^
감사합니다.
@브러운아이 고맙습니다^^
감사합니다 그런데 문제 를 풀게하고 최종 정답은 결과버튼으로 하는건 없나요 ? 그로 인해서 포인트 주게요;;;ㅋ 디비 설계해야하나요?
좋아요
