자바스크립트를 표시할 수 있는 게시판을 사용하여 문제풀이게시판을 만들어 보았습니다.

비타주리님의 자바스크립트 전용게시판(그누보드 - 자바스크립트 "전용" 게시판 최종 버전(?) > 그누보드5 스킨 (sir.kr))을 사용했습니다. 감사의 말씀을 전합니다.

코드는 동일합니다. 다운로드, 사용법은 위의 링크를 참고하시면 됩니다.

리스트에 썸네일보기를 추가했습니다.

글쓰기에서 리스트썸네일에 표시될 이미지 주소를 넣어주시면 됩니다.

예: http:example.com/images/img.jpg 

그누보드에 기본으로 설치된 게시판은 글쓰기에서 자바스크립트로 글쓰기가 안되는데요.

자바스크립트 글쓰기가 가능한 게시판에 html, css, javascript 로 만든 문제풀이 코드을 올려서 문제풀이 게시판으로 만드는 것입니다.

압축을 풀면 js_pc, js_mobile 폴더와 html_editor.php파일이 나옵니다.

그누보드 순정을 기준으로 해서 html_editor.php은 root/bbs/html_editor경로가 되도록 bbs폴더에 올려줍니다.

js_pc는 그누보드 순정 기준으로 skin/board/js_pc 경로가 되도록 올려줍니다.

js_mobile는 그누보드 순정기준으로 mobile/skin/board/js_mobile경로가 되도록 올려줍니다.

글쓰기

글쓰기에서 html, css, js로 만든 코드를 붙여넣기 해주면 됩니다.

예: 힌트보기와 정답보기가 있는 게시판

[code]<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>
<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/zz/images/changduk.jpg" style="width:100%;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/zz/images/500/u4.png" style="width:100%;height:auto;">
</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>[/code]

예2: 정답보기를 details를 사용한 게시판

[code]<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>

  <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>[/code]

감사합니다^^