자바스크립로 만든 문제풀이 > 개발자팁

현재접속자 최신글 매뉴얼 FAQ
그누보드5
그누보드6
가이드
포럼
  • Q&A
  • 파이써니스타
  • 이슈
  • 버그신고
  • 사용후기
    • 자료실
  • 다운로드
  • 팁자료실
  • 스킨
  • 테마
  • 플러그인
    • Q & A
    궁금한 게 있으신가요? 지금 질문해보세요!
    솔루션
    프로그래밍
    서버
    사이트운영
    컨텐츠몰
    나의 재능을 팔아보세요!
    부가서비스
    프로모션! 신용카드 결제수수료 2.9%
    제작의뢰
    커뮤니티
    커뮤니티
    소모임
    스터디
    강좌
    기타

    개발자팁

    개발과 관련된 유용한 정보를 공유하세요.
    질문은 QA에서 해주시기 바랍니다.
    출석체크 포인트가위바위보 포인트야구게임

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

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

    본문

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

    비타주리님의 그누보드 - 자바스크립트 토글 컨텐츠 함수 > 그누보드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

    댓글 14개

    김철용 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 23.06.03 14:08:08
    @수평선1203 예 확실히 details를 사용하니 더 간단하네요.
    몰랐던 것을 알려주셔서 감사합니다. 정답보기를 details로도 만들어 보았습니다^^
    피라미드 자기소개 아이디로 검색 전체게시물 회원게시물 23.07.09 12:20:43
    감사합니다 그런데  문제 를 풀게하고 최종 정답은 결과버튼으로 하는건 없나요 ? 그로 인해서 포인트 주게요;;;ㅋ 디비 설계해야하나요?
    전체 5,352
    개발자팁 내용 검색
    출석체크 포인트가위바위보 포인트야구게임

    회원로그인

    (주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
    사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
    © SIRSOFT