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

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

김철용
프로필 보기이 회원 글보기
 · 2년 전 · 1564 · 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년 전
@들레아빠 감사합니다 ^^
푸른산타
프로필 보기이 회원 글보기
 2년 전
감사합니다.
김철용
프로필 보기이 회원 글보기
 2년 전
@푸른산타 고맙습니다^^
써맨
프로필 보기이 회원 글보기
 2년 전
감사합니다.
김철용
프로필 보기이 회원 글보기
 2년 전
@써맨 고맙습니다^^
수평선1203
프로필 보기이 회원 글보기
 2년 전
정답보기는 details 태그를 사용하면 더 간단할것 같네요^^
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_details
김철용
프로필 보기이 회원 글보기
 2년 전
@수평선1203 예 확실히 details를 사용하니 더 간단하네요.
몰랐던 것을 알려주셔서 감사합니다. 정답보기를 details로도 만들어 보았습니다^^

게시글 목록

번호 제목
17819
JavaScript 당신이 알아야 할 자바스크립트의 강력한 7가지 팁 3
17818
JavaScript 자바스크립트 코드를 더 깔끔하고 보기 좋게 작성하는 팁 1
17817
PHP chatgtp
17816
JavaScript textarea 자동 높이 설정하기. 1
17814
PHP 페이징 개선 그러나 기본적으로 이해불가능한 소스로 비춰질수도 있음
17811
JavaScript 자바스크립트 플래이그라운드 - RUNJS
17810
PHP 이걸 개발팁이라고 해야하나..타게시판 이관후 검색 안되는거 해결했습니다.
17809
jQuery 페이지 height 길이 파악후 페이지 스크롤 해서 바 표현하기
17808
JavaScript 16진수 색상코드 확인함수
17803
기타 개발자의 ChatGPT 활용 3
17799
기타 ActiveX 방식의 KCP 모듈 -> 최신 모듈로 변경
17798
PHP PHP 를 http 타임아웃이후에도 동작하게 하기 1
17797
JavaScript 동영상파일 썸네일 만들기 8
17795
JavaScript div태그의 사이즈가 변경되는 이벤트를 처리하기
17794
JavaScript 초->hh:mm:ss로 변환하는 함수 1
17793
JavaScript JSON Beautify
17790
PHP JSONP실례
17789
PHP js와 같은 리소스의 캐쉬문제로 인한 업그레이드 안되는 문제 해결하기
17786
JavaScript ThreeJS로 3디지구에 포인트 찍고 정보 현시기능
17774
특수글자들을 안전하게 처리하기 10
17760
자바스크립로 만든 문제풀이 14 현재글
17755
100% 꽝을 보장하는 간단한 로또번호 생성 함수 4
17750
라라곤 6.0 설치 (윈도우용) 6
17729
롤링배너(?) 갤러리 20
17722
모바일 메인에 Tabs넣기 6
17714
관리자가 아닐때 사이트에 마우스 오른쪽버튼과 f12개발자 도구 금지시키기 7
17708
pc outlogin 아래에 비디오효과 적용하기 6
17686
유튜브 90도 회전 반응형 21
17676
JavaScript 유튜브 풀화면 묵음배경 예제 9
17666
유튜브 배경 모바일 묵음 자동재생 9
이전 다음
전체 목록