테스트 사이트 - 개발 중인 베타 버전입니다
SIR

자바스크립로 만든 문제풀이

김철용
프로필 보기이 회원 글보기
 · 2년 전 · 1561 · 14

링크

http://egis.kr/bbs/board.php?bo_table=basic_original (155)

학원 홈페이지 등에서 사용할 수 있는 문제풀이 입니다.

비타주리님의 그누보드 - 자바스크립트 토글 컨텐츠 함수 > 그누보드5 팁자료실 (sir.kr)을 사용했습니다.

감사의 말씀을 전합니다.

W3Schools Tryit Editor 에서 코드를 붙여넣기 해서 확인 하실 수있습니다.

[code]

<!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>

[/code]

 

정답보기를 details를 사용한 코드

[code]

<!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>

[/code]

감사합니다.

목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 14개

브러운아이
프로필 보기이 회원 글보기
 2년 전
감사합니다.
김철용
프로필 보기이 회원 글보기
 2년 전
@브러운아이 고맙습니다^^
피라미드
프로필 보기이 회원 글보기
 2년 전
감사합니다 그런데 문제 를 풀게하고 최종 정답은 결과버튼으로 하는건 없나요 ? 그로 인해서 포인트 주게요;;;ㅋ 디비 설계해야하나요?
홈피맨
프로필 보기이 회원 글보기
 2년 전
좋아요

게시글 목록

번호 제목
17657
자바스크립 시계 [한국시간 고정] 8
17655
라라곤 6.0 데이타베이스 패스워드 설정하기 1
17654
기타 특정 기기 접근 금지시키는 스크립트
17653
JavaScript ThreeJS - 3D Bar and Progress Bar 1
17652
node.js RAM점유크기에 의한 노드서버관리
17651
JavaScript Javascript Undo, Redo 기능 구현하기
17650
PHP PHP에서 다운로드로직을 구현할때 서버부하문제를 고려한 방법
17642
node.js nodejs서버가 사용중인 메모리에 대한 로그
17633
node.js node.js에서 스케쥴링작성 8
17632
PHP 파일의 MIME 타입을 얻기 위한 클래스 1
17631
MySQL InnoDB와 MyISAM의 우단점
17630
PHP 코드이그나이터와 라라벨의 비교 1
17628
JavaScript 자바스크립트 기반으로 HTML Canvas에 이미지를 불러들여 테두리색입히기
17624
기타 일반 tcp소켓과 웹소켓의 비교 5
17623
기타 다중 소켓 포트와 한 개의 소켓 포트 비교
17620
node.js tcp소켓과 websocket 의 비교 2
17618
JavaScript JavaScript로 이미지의 부분 영역을 따내기
17617
node.js JWT란 무엇이며 nodejs에서 JWT를 구현하기 위한 방법
17614
node.js Node.js 코드를 실행 가능한 단일 실행 파일로 묶는 방법
17612
node.js 노드에서 이미지 자료를 웹소켓을 통해 클라이언트에 전송하고, 클라이언트에서는 웹소켓을 통해 이미지를 받아서 웹브라우저에 표시 1
17611
PHP PHP를 사용하여 TCP 소켓 서버를 만드는 방법
17610
node.js nodejs로 망기판을 선택하여 그 망기판으로 외부와 통신하는 코드 1
17609
PHP PHP로 웹소켓서버를 생성하여 채팅기능 구현하기 2
17608
node.js Node.js로 지속적인 핑 결과를 파일로 저장
17607
정규표현식 특수문자 제거, 우리글짜가 있는지 체크
17604
node.js Node.js에서 PDF 파일의 페이지 수를 얻기
17603
PHP PHP로 pdf의 페이지수를 얻기 1
17602
node.js Node.js로 워터마킹 기능을 구현하는 방법
17600
PHP PHP를 사용하여 이미지에 워터마크를 추가하는 방법 한가지
17594
node.js NodeJS에서 image를 업로드 하면 그와 유사한 상품리스트 작성하기 2
이전 다음
전체 목록