Code - yangart/sejongOn

<!DOCTYPE html> <html lang="ko"> <head> <title>온세종학교</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <meta name="format-detection" content="telephone=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"> <link href="/resources/front/site/SITE_00000/css/style.css" rel="stylesheet">  <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-3.6.0.min.js"></script> <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-ui.min.js"></script>   <script src="/resources/front/site/SITE_00000/js/html2canvas.js"></script>        <script src="/resources/front/site/SITE_00000/js/common.js"></script> <script src="/resources/front/site/SITE_00000/js/common-custom.js"></script>  </head> <body> <section class="viewer student"> <header class="viewer-header"> <div class="viewer-tit"> <h1>평가지명 평가지명 평가지명 평가지명평가지명</h1> </div> <div class="viewer-fnc"> <div class="timer"> <i class="ico-hourglass"></i> <strong>경과</strong> <span id="timerQuizTotal">00:00</span> </div>  </div> </header> <div class="viewer-body"> <div class="viewer-cont"> <div class="quiz-viewer"> <div class="quiz-viewer-header"> <ul class="info"> <li> <strong>현재 문제</strong> <div class="txt-area"><strong>2</strong> / 3</div> </li> <li> <strong>배점</strong> <div class="txt-area">5점</div> </li> <li> <strong>소요 시간</strong> <div class="txt-area"><span id="timerQuiz">00:00</span></div> </li> </ul> </div> <div class="quiz-viewer-body"> <aside class="quiz-viewer-aside"> <div class="cont"> <ul class="state-list"> <li class="is-active is-current"> <a href="#none" class="lnk-full">문항보기</a> <span class="num">1</span> <div class="txt-area "> <div class="flex-area"> <div class="l-area label-area"> <i class="ico-group" title="세트문항"></i> <p>풀이중</p> </div> <div class="r-area"> <small>12:00</small> </div> </div> </div> </li> <li class="is-active"> <a href="#none" class="lnk-full">문항보기</a> <span class="num">1</span> <div class="txt-area "> <div class="flex-area"> <div class="l-area label-area"> <i class="ico-group" title="세트문항"></i> <p>풀이완료</p> </div> <div class="r-area"> <small>12:00</small> </div> </div> </div> </li> <li class="is-active"> <a href="#none" class="lnk-full">문항보기</a> <span class="num">1</span> <div class="txt-area "> <div class="flex-area"> <div class="l-area label-area"> <p>풀이완료</p> </div> <div class="r-area"> <small>12:00</small> </div> </div> </div> </li> <li> <a href="#none" class="lnk-full">문항보기</a> <span class="num">1</span> <div class="txt-area "> <div class="flex-area"> <div class="l-area label-area"> <p>미풀이</p> </div> <div class="r-area">  </div> </div> </div> </li> <li> <a href="#none" class="lnk-full">문항보기</a> <span class="num">1</span> <div class="txt-area "> <div class="flex-area"> <div class="l-area label-area"> <p>미풀이</p> </div> <div class="r-area">  </div> </div> </div> </li> <li> <a href="#none" class="lnk-full">문항보기</a> <span class="num">1</span> <div class="txt-area "> <div class="flex-area"> <div class="l-area label-area"> <p>미풀이</p> </div> <div class="r-area">  </div> </div> </div> </li> </ul> </div> </aside> <div class="quiz-viewer-cont"> <div class="quiz-viewer-wrap"> <ul class="viewer-q-list"> <li class="q-item"> <div class="q-area"> <div class="q-tit"> <span class="num">1</span> <div class="q-txt"> <p>이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까?</p> </div> </div> <div class="q-file-area"> <div class="q-file-txt"> <table> <tbody> <tr> <td style="vertical-align:middle">영지의<br>상황</td> <td colspan="2" style="vertical-align:middle">미술 시간에 영지가 실수로 물을<br>쏟아 진혁이 그린 그림이 망가짐</td> </tr> <tr> <td rowspan="4" style="vertical-align:middle">구분</td> <td style="vertical-align:middle">마음</td> <td style="vertical-align:middle">놀라고 괴롭다.</td> </tr> <tr> <td style="vertical-align:middle">표정</td> <td style="vertical-align:middle">㉠</td> </tr> <tr> <td style="vertical-align:middle">몸짓</td> <td style="vertical-align:middle">몸을 움츠린다.</td> </tr> <tr> <td style="vertical-align:middle">말투</td> <td style="vertical-align:middle">진심을 담아서 말한다.</td> </tr> </tbody> </table> </div> <div class="q-file-txt"> 보기 이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까 보기 이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까 보기 이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까 </div> <div class="q-img"> <figure> <img src="/resources/front/site/SITE_00000/images/temp/img1.jpg" alt="이미지"> <div class="img-fnc"> <button type="button" class="btn sm circle ico-zoomin" onclick="popupOpenPub('popupZoom');">확대</button> </div> </figure> </div> <div class="q-file-video"> <div class="file-video-area"> <video id="qVideo1" class="video-js"></video> </div> </div> <div class="q-file-audio"> <audio controls="controls"> <source src="../../images/main/before_bg_video.mp4" type="video/mp4"> </audio> </div> </div> </div> <div class="a-area"> <ol class="a-list"> <li class="a-item"> <input type="checkbox" id="a1_1" name="a1"> <label for="a1_1" class="a-input-label">선택</label> <div class="a-box"> <span class="num">1</span> <div class="a-cont"> <div class="a-txt"> '글자 찾기 놀이'의 과정에서 코딩을 하는 과정을 이해할 수 있다. </div> </div> </div> </li> <li class="a-item"> <input type="checkbox" id="a1_2" name="a1"> <label for="a1_2" class="a-input-label">선택</label> <div class="a-box"> <span class="num">2</span> <div class="a-cont"> <div class="a-txt"> '글자 찾기 놀이'의 과정에서 코딩을 하는 과정을 이해할 수 있다. </div> </div> </div> </li> <li class="a-item"> <input type="checkbox" id="a1_3" name="a1"> <label for="a1_3" class="a-input-label">선택</label> <div class="a-box"> <span class="num">3</span> <div class="a-cont"> <div class="a-txt"> '글자 찾기 놀이'의 과정에서 코딩을 하는 과정을 이해할 수 있다. </div>  </div> </div> </li> </ol> </div> </li> </ul> </div> </div> </div> </div> </div> </div> <footer class="viewer-footer"> <div class="r-area viewer-submit">    <button type="submit" class="btn-viewer-lg primary" onclick="popupOpenPub('popupSubmit')">평가지제출</button> </div> <div class="c-area viewer-btn-area"> <button type="button" class="btn-viewer-lg"><i class="ico-arrow-left"></i> 이전문제</button>  <button type="button" class="btn-viewer-lg">다음문제 <i class="ico-arrow-right"></i></button> </div> </footer> </section>  <div class="toast"></div>  <div class="dim"></div>  <div class="popup-zoom" data-popuppub="popupZoom"> <div class="pop-body"> <figure> <img src="/resources/front/site/SITE_00000/images/temp/img1.jpg" alt="이미지 원본"> </figure> </div> <button type="button" class="pop-close white lg"><span class="txt-hide">팝업닫기</span></button> </div>  <div class="popup xlg" data-popuppub="popupSubmit"> <div class="pop-header"> <h1>기초학력 답안</h1> <p>입력한 정답을 확인해 주세요.</p> </div> <div class="pop-body"> <ol class="num-list"> <li> <span class="num">1</span> <div class="txt-area"> 1 </div> </li> <li> <span class="num">2</span> <div class="txt-area"> 2 </div> </li> <li> <span class="num">3</span> <div class="txt-area"> 3 </div> </li> <li> <span class="num">4</span> <div class="txt-area"> 4 </div> </li> <li> <span class="num">5</span> <div class="txt-area"> 5 </div> </li> <li> <span class="num">6</span> <div class="txt-area"> 1 </div> </li> <li> <span class="num">7</span> <div class="txt-area"> 2 </div> </li> <li> <span class="num">8</span> <div class="txt-area"> 3 </div> </li> <li> <span class="num">9</span> <div class="txt-area"> 4 </div> </li> <li> <span class="num">10</span> <div class="txt-area"> 5 </div> </li> <li> <span class="num">11</span> <div class="txt-area"> 1 </div> </li> <li> <span class="num">12</span> <div class="txt-area"> 2 </div> </li> <li> <span class="num">13</span> <div class="txt-area"> 3 </div> </li> <li> <span class="num">14</span> <div class="txt-area"> 4 </div> </li> <li> <span class="num">15</span> <div class="txt-area"> 5 </div> </li> <li> <span class="num">16</span> <div class="txt-area"> 1 </div> </li> <li> <span class="num">17</span> <div class="txt-area"> 2 </div> </li> <li> <span class="num">18</span> <div class="txt-area"> 3 </div> </li> <li> <span class="num">19</span> <div class="txt-area"> 4 </div> </li> <li> <span class="num">20</span> <div class="txt-area"> 5 </div> </li> <li> <span class="num">21</span> <div class="txt-area"> 1 </div> </li> <li> <span class="num">22</span> <div class="txt-area"> 2 </div> </li> <li> <span class="num">23</span> <div class="txt-area"> 3 </div> </li> <li> <span class="num">24</span> <div class="txt-area"> 4 </div> </li> <li> <span class="num">25</span> <div class="txt-area"> 5 </div> </li> <li> <span class="num">21</span> <div class="txt-area"> 1 </div> </li> <li> <span class="num">22</span> <div class="txt-area"> 2 </div> </li> <li> <span class="num">23</span> <div class="txt-area"> 3 </div> </li> <li> <span class="num">24</span> <div class="txt-area"> 4 </div> </li> <li> <span class="num">25</span> <div class="txt-area"> 5 </div> </li> <li> <span class="num">21</span> <div class="txt-area"> 1 </div> </li> <li> <span class="num">22</span> <div class="txt-area"> 2 </div> </li> <li> <span class="num">23</span> <div class="txt-area"> 3 </div> </li> <li> <span class="num">24</span> <div class="txt-area"> 4 </div> </li> <li> <span class="num">25</span> <div class="txt-area"> 5 </div> </li> </ol> </div> <div class="pop-footer"> <p class="align-center">답안을 제출하시겠습니까?</p> <div class="pop-btn-cont"> <button type="button" class="btn" onclick="popupClosePub('popupSubmit')">취소</button> <button type="button" class="btn primary btn-save">제출하기</button> </div> </div> <button type="button" class="pop-close">팝업닫기</button> </div> <div class="loading"> <figure> <img src="/resources/front/site/SITE_00000/images/common/ico-img/ico-img-write.svg" alt="> </figure> <strong>평가지를 제출 중입니다.</strong> <p>잠시만 기다려주세요</p> </div>     <script> $(document).ready(function () { function timerUp(target) { var seconds = 0; setInterval(function () { seconds++; var hours = Math.floor(seconds / (60 * 60)); var minutes = (Math.floor(seconds / 60)) % 60; var remainingSeconds = seconds % 60; var display = (hours > 0 ? (hours < 10 ? '0' : '') + hours + ':' : '') + (minutes < 10 ? '0' : '') + minutes + ':' + (remainingSeconds < 10 ? '0' : '') + remainingSeconds; $(target).text(display); }, 1000); } timerUp('#timerQuizTotal'); timerUp('#timerQuiz'); }); </script> <script> $(document).ready(function () { function saveImage() { var numList = $('.num-list')[0]; var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.width = numList.clientWidth; canvas.height = numList.clientHeight; html2canvas(numList).then(function (renderedCanvas) { context.drawImage(renderedCanvas, 0, 0); //다운로드 var dataURL = canvas.toDataURL('image/jpeg'); var link = document.createElement('a'); link.href = dataURL; link.download = 'canvas.jpg'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }); } $('.btn-save').click(function () { saveImage(); }); }); </script> </body> </html>