--- html/onSejong/index.html
+++ html/onSejong/index.html
... | ... | @@ -683,19 +683,50 @@ |
| 683 | 683 |
<li> |
| 684 | 684 |
콘텐츠 |
| 685 | 685 |
<ul> |
| 686 |
- <li class="add">영상/이미지/문서,manager/mystorage/contentList.html</li> |
|
| 687 |
- <li class="working">문항,manager/mystorage/quizList.html</li> |
|
| 688 |
- <li class="working">평가지,manager/mystorage/testList.html</li> |
|
| 686 |
+ <li> |
|
| 687 |
+ 영상/이미지/문서 |
|
| 688 |
+ <ul> |
|
| 689 |
+ <li class="add">목록,manager/mystorage/contentList.html</li> |
|
| 690 |
+ <li class="working">영상 상세,manager/mystorage/videoView.html</li> |
|
| 691 |
+ <li class="before">이미지 상세</li> |
|
| 692 |
+ <li class="before">문서 상세</li> |
|
| 693 |
+ </ul> |
|
| 694 |
+ </li> |
|
| 695 |
+ <li> |
|
| 696 |
+ 문항 |
|
| 697 |
+ <ul> |
|
| 698 |
+ <li class="working">목록,manager/mystorage/quizList.html</li> |
|
| 699 |
+ <li class="working">문항 상세,manager/mystorage/quizView.html</li> |
|
| 700 |
+ <li class="working">문항 정답 및 풀이,manager/mystorage/quizAnswer.html</li> |
|
| 701 |
+ </ul> |
|
| 702 |
+ </li> |
|
| 703 |
+ <li> |
|
| 704 |
+ 평가지 |
|
| 705 |
+ <ul> |
|
| 706 |
+ <li class="working">목록,manager/mystorage/testList.html</li> |
|
| 707 |
+ <li class="working">평가지 상세,manager/mystorage/testView.html</li> |
|
| 708 |
+ <li class="working">평가지 정답 및 풀이,manager/mystorage/testAnswer.html</li> |
|
| 709 |
+ </ul> |
|
| 710 |
+ </li> |
|
| 689 | 711 |
</ul> |
| 690 | 712 |
</li> |
| 691 | 713 |
<li> |
| 692 | 714 |
상세보기 |
| 693 | 715 |
<ul> |
| 694 |
- <li class="working">영상,manager/mystorage/videoView.html</li> |
|
| 716 |
+ <li>영상,manager/mystorage/videoView.html</li> |
|
| 695 | 717 |
<li class="before">이미지</li> |
| 696 | 718 |
<li class="before">문서</li> |
| 697 | 719 |
</ul> |
| 698 | 720 |
</li> |
| 721 |
+ <li> |
|
| 722 |
+ 새로 만들기 |
|
| 723 |
+ <ul class="before"> |
|
| 724 |
+ <li>[팝업]새로만들기</li> |
|
| 725 |
+ <li>콘텐츠 만들기</li> |
|
| 726 |
+ <li>문항 만들기</li> |
|
| 727 |
+ <li>평가지 만들기</li> |
|
| 728 |
+ </ul> |
|
| 729 |
+ </li> |
|
| 699 | 730 |
</ul> |
| 700 | 731 |
</li> |
| 701 | 732 |
<li> |
+++ html/onSejong/manager/mystorage/quizAnswer.html
... | ... | @@ -0,0 +1,201 @@ |
| 1 | +<!DOCTYPE html> | |
| 2 | +<html lang="ko"> | |
| 3 | + <head> | |
| 4 | + <title>온세종학교</title> | |
| 5 | + | |
| 6 | + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| 7 | + <meta name="Author" content="" /> | |
| 8 | + <meta name="Keywords" content="" /> | |
| 9 | + <meta name="Description" content="" /> | |
| 10 | + <meta name="format-detection" content="telephone=no" /> | |
| 11 | + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| 12 | + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" /> | |
| 13 | + | |
| 14 | + <link href="/resources/front/site/SITE_00000/css/style.css" rel="stylesheet" /> | |
| 15 | + | |
| 16 | + <!-- 공통 plugin --> | |
| 17 | + <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-3.6.0.min.js"></script> | |
| 18 | + <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-ui.min.js"></script> | |
| 19 | + <!-- //공통 plugin --> | |
| 20 | + | |
| 21 | + <!-- 페이지 plugin--> | |
| 22 | + <!-- //페이지 plugin--> | |
| 23 | + <!-- 공통 퍼블 layout: 개발시 삭제--> | |
| 24 | + <!-- <script src="/resources/front/site/SITE_00000/js/_layout.js"></script> --> | |
| 25 | + <!--//퍼블 layout--> | |
| 26 | + | |
| 27 | + <!-- 공통 메뉴 js--> | |
| 28 | + <!-- //공통 메뉴 js --> | |
| 29 | + | |
| 30 | + <!--공통 퍼블 js--> | |
| 31 | + <script src="/resources/front/site/SITE_00000/js/common.js"></script> | |
| 32 | + <script src="/resources/front/site/SITE_00000/js/common-custom.js"></script> | |
| 33 | + <!--//공통 퍼블 js--> | |
| 34 | + </head> | |
| 35 | + | |
| 36 | + <body> | |
| 37 | + <section class="viewer"> | |
| 38 | + <header class="viewer-header"> | |
| 39 | + <div class="viewer-tit"> | |
| 40 | + <ul class="info-inline-list"> | |
| 41 | + <li> | |
| 42 | + <strong class="info-tit">문항ID</strong> | |
| 43 | + <div class="txt-area">612483</div> | |
| 44 | + </li> | |
| 45 | + </ul> | |
| 46 | + <h1>활동1 무늬를 꾸며보는 방법 알아보기</h1> | |
| 47 | + </div> | |
| 48 | + <button type="button" class="btn sm"> | |
| 49 | + <i class="ico-logout"></i> | |
| 50 | + 나가기 | |
| 51 | + </button> | |
| 52 | + <div class="viewer-fnc-mo"> | |
| 53 | + <div class="etc-fnc-area"> | |
| 54 | + <button type="button" class="btn-etc-fnc btn-ico ico-more-vert">더보기</button> | |
| 55 | + <ul class="etc-fnc"> | |
| 56 | + <li><button type="button">문항 오류신고</button></li> | |
| 57 | + </ul> | |
| 58 | + </div> | |
| 59 | + </div> | |
| 60 | + </header> | |
| 61 | + <div class="viewer-body"> | |
| 62 | + <div class="viewer-cont"> | |
| 63 | + <div class="quiz-viewer"> | |
| 64 | + <div class="quiz-viewer-body"> | |
| 65 | + <div class="quiz-viewer-cont"> | |
| 66 | + <div class="quiz-viewer-wrap"> | |
| 67 | + <ul class="viewer-q-list"> | |
| 68 | + <li class="q-item"> | |
| 69 | + <div class="q-area"> | |
| 70 | + <div class="q-tit"> | |
| 71 | + <span class="num">1</span> | |
| 72 | + <div class="q-txt"> | |
| 73 | + <p>이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까?</p> | |
| 74 | + </div> | |
| 75 | + </div> | |
| 76 | + <div class="q-file-area"> | |
| 77 | + <div class="audio-box"> | |
| 78 | + <button type="button" class="btn-audio-play" title="오디오 재생">오디오</button> | |
| 79 | + <i class="ico-headphone"></i> | |
| 80 | + <span>듣기 예제</span> | |
| 81 | + <span class="btn circle sm ico-play"></span> | |
| 82 | + </div> | |
| 83 | + <div class="q-file-audio"> | |
| 84 | + <audio controls="controls"> | |
| 85 | + <source src="../../images/main/before_bg_video.mp4" type="video/mp4" /> | |
| 86 | + </audio> | |
| 87 | + </div> | |
| 88 | + <div class="q-file-txt"> | |
| 89 | + 보기 이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까 보기 이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까 보기 이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까 | |
| 90 | + </div> | |
| 91 | + <div class="q-img"> | |
| 92 | + <figure> | |
| 93 | + <img src="../../../../resources/front/site/SITE_00000/images/temp/sample_pic1.png" alt="이미지" /> | |
| 94 | + </figure> | |
| 95 | + </div> | |
| 96 | + </div> | |
| 97 | + </div> | |
| 98 | + <div class="a-area"> | |
| 99 | + <ol class="a-list"> | |
| 100 | + <li class="a-item a-o"> | |
| 101 | + <input type="checkbox" id="a1_1" name="a1" disabled> | |
| 102 | + <label for="a1_1" class="a-input-label">선택</label> | |
| 103 | + <span class="label-q-o">정답</span> | |
| 104 | + <div class="a-box"> | |
| 105 | + <span class="num">1</span> | |
| 106 | + <div class="a-cont"> | |
| 107 | + <div class="a-txt"> | |
| 108 | + '글자 찾기 놀이'의 과정에서 코딩을 하는 과정을 이해할 수 있다. | |
| 109 | + </div> | |
| 110 | + </div> | |
| 111 | + </div> | |
| 112 | + </li> | |
| 113 | + <li class="a-item a-x"> | |
| 114 | + <input type="checkbox" id="a1_2" name="a1" disabled checked> | |
| 115 | + <label for="a1_2" class="a-input-label">선택</label> | |
| 116 | + <span class="label-q-x">오답</span> | |
| 117 | + <div class="a-box"> | |
| 118 | + <span class="num">2</span> | |
| 119 | + <div class="a-cont"> | |
| 120 | + <div class="a-txt"> | |
| 121 | + '글자 찾기 놀이'의 과정에서 코딩을 하는 과정을 이해할 수 있다. | |
| 122 | + </div> | |
| 123 | + </div> | |
| 124 | + </div> | |
| 125 | + </li> | |
| 126 | + <li class="a-item"> | |
| 127 | + <input type="checkbox" id="a1_3" name="a1" disabled > | |
| 128 | + <label for="a1_3" class="a-input-label">선택</label> | |
| 129 | + <div class="a-box"> | |
| 130 | + <span class="num">3</span> | |
| 131 | + <div class="a-cont"> | |
| 132 | + <div class="a-txt"> | |
| 133 | + '글자 찾기 놀이'의 과정에서 코딩을 하는 과정을 이해할 수 있다. | |
| 134 | + </div> | |
| 135 | + </div> | |
| 136 | + </div> | |
| 137 | + </li> | |
| 138 | + </ol> | |
| 139 | + </div> | |
| 140 | + </li> | |
| 141 | + </ul> | |
| 142 | + <ul class="q-comment"> | |
| 143 | + <li> | |
| 144 | + <strong class="info-tit">정답</strong> | |
| 145 | + <div class="txt-area"><strong>3번, 5번</strong></div> | |
| 146 | + </li> | |
| 147 | + <li> | |
| 148 | + <strong class="info-tit">풀이</strong> | |
| 149 | + <div class="txt-area"> | |
| 150 | + <div class="q-file-area"> | |
| 151 | + <div class="q-file-txt"> | |
| 152 | + 이 문제는 두 개의 괄호가 주어진 경우로 둘 중 하나만 정확히 알면 쉽게 정답에 접근할 수 있는 문제이다.<br> | |
| 153 | + ①의 경우 왜냐하면 이하를 먼저 해석하여 아이들이 TV영향을 쉽게 받는다를 유추할 수 있고 ②의 경우는 "말다툼"이 핵심 어구로서 "화해하다"와 연결할 수 있을 것이다. | |
| 154 | + </div> | |
| 155 | + </div> | |
| 156 | + </div> | |
| 157 | + </li> | |
| 158 | + </ul> | |
| 159 | + <div class="btn-cont"> | |
| 160 | + <button class="btn lg primary">다시 풀기</button> | |
| 161 | + </div> | |
| 162 | + </div> | |
| 163 | + </div> | |
| 164 | + <div class="quiz-viewer-fnc"> | |
| 165 | + <button class="btn-prev" disabled><span>이전 문제</span></button> | |
| 166 | + <button class="btn-next"><span>다음 문제</span></button> | |
| 167 | + </div> | |
| 168 | + </div> | |
| 169 | + </div> | |
| 170 | + </div> | |
| 171 | + <div class="viewer-fnc-cont"></div> | |
| 172 | + </div> | |
| 173 | + </section> | |
| 174 | + | |
| 175 | + <!-- toast --> | |
| 176 | + <div class="toast"></div> | |
| 177 | + | |
| 178 | + <!--popup--> | |
| 179 | + <div class="dim"></div> | |
| 180 | + | |
| 181 | + <script> | |
| 182 | + // Audio 객체 설정 | |
| 183 | + let loopCnt = 0; | |
| 184 | + const myAudio = new Audio(); | |
| 185 | + myAudio.src = "https://icdn.itt.link/online/AttachFiles/contents/qesitm/20240124134856136.mp3"; | |
| 186 | + myAudio.loop = false; | |
| 187 | + | |
| 188 | + const btnPlay = document.querySelector(".btn-audio-play"); | |
| 189 | + btnPlay.onclick = function () { | |
| 190 | + if (loopCnt == 0) { | |
| 191 | + myAudio.play(); | |
| 192 | + loopCnt++; | |
| 193 | + this.setAttribute("disabled", true); | |
| 194 | + this.closest('.audio-box').classList.add('is-disabled'); | |
| 195 | + } else { | |
| 196 | + alert("이미 들음"); | |
| 197 | + } | |
| 198 | + } | |
| 199 | + </script> | |
| 200 | + </body> | |
| 201 | +</html> |
+++ html/onSejong/manager/mystorage/quizView.html
... | ... | @@ -0,0 +1,182 @@ |
| 1 | +<!DOCTYPE html> | |
| 2 | +<html lang="ko"> | |
| 3 | + <head> | |
| 4 | + <title>온세종학교</title> | |
| 5 | + | |
| 6 | + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| 7 | + <meta name="Author" content="" /> | |
| 8 | + <meta name="Keywords" content="" /> | |
| 9 | + <meta name="Description" content="" /> | |
| 10 | + <meta name="format-detection" content="telephone=no" /> | |
| 11 | + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| 12 | + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" /> | |
| 13 | + | |
| 14 | + <link href="/resources/front/site/SITE_00000/css/style.css" rel="stylesheet" /> | |
| 15 | + | |
| 16 | + <!-- 공통 plugin --> | |
| 17 | + <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-3.6.0.min.js"></script> | |
| 18 | + <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-ui.min.js"></script> | |
| 19 | + <!-- //공통 plugin --> | |
| 20 | + | |
| 21 | + <!-- 페이지 plugin--> | |
| 22 | + <!-- //페이지 plugin--> | |
| 23 | + <!-- 공통 퍼블 layout: 개발시 삭제--> | |
| 24 | + <!-- <script src="/resources/front/site/SITE_00000/js/_layout.js"></script> --> | |
| 25 | + <!--//퍼블 layout--> | |
| 26 | + | |
| 27 | + <!-- 공통 메뉴 js--> | |
| 28 | + <!-- //공통 메뉴 js --> | |
| 29 | + | |
| 30 | + <!--공통 퍼블 js--> | |
| 31 | + <script src="/resources/front/site/SITE_00000/js/common.js"></script> | |
| 32 | + <script src="/resources/front/site/SITE_00000/js/common-custom.js"></script> | |
| 33 | + <!--//공통 퍼블 js--> | |
| 34 | + </head> | |
| 35 | + | |
| 36 | + <body> | |
| 37 | + <section class="viewer"> | |
| 38 | + <header class="viewer-header"> | |
| 39 | + <div class="viewer-tit"> | |
| 40 | + <ul class="info-inline-list"> | |
| 41 | + <li> | |
| 42 | + <strong class="info-tit">문항ID</strong> | |
| 43 | + <div class="txt-area">612483</div> | |
| 44 | + </li> | |
| 45 | + </ul> | |
| 46 | + <h1>활동1 무늬를 꾸며보는 방법 알아보기</h1> | |
| 47 | + </div> | |
| 48 | + <button type="button" class="btn sm"> | |
| 49 | + <i class="ico-logout"></i> | |
| 50 | + 나가기 | |
| 51 | + </button> | |
| 52 | + <div class="viewer-fnc-mo"> | |
| 53 | + <div class="etc-fnc-area"> | |
| 54 | + <button type="button" class="btn-etc-fnc btn-ico ico-more-vert">더보기</button> | |
| 55 | + <ul class="etc-fnc"> | |
| 56 | + <li><button type="button">문항 오류신고</button></li> | |
| 57 | + </ul> | |
| 58 | + </div> | |
| 59 | + </div> | |
| 60 | + </header> | |
| 61 | + <div class="viewer-body"> | |
| 62 | + <div class="viewer-cont"> | |
| 63 | + <div class="quiz-viewer"> | |
| 64 | + <div class="quiz-viewer-body"> | |
| 65 | + <div class="quiz-viewer-cont"> | |
| 66 | + <div class="quiz-viewer-wrap"> | |
| 67 | + <ul class="viewer-q-list"> | |
| 68 | + <li class="q-item"> | |
| 69 | + <div class="q-area"> | |
| 70 | + <div class="q-tit"> | |
| 71 | + <span class="num">1</span> | |
| 72 | + <div class="q-txt"> | |
| 73 | + <p>이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까?</p> | |
| 74 | + </div> | |
| 75 | + </div> | |
| 76 | + <div class="q-file-area"> | |
| 77 | + <div class="audio-box"> | |
| 78 | + <button type="button" class="btn-audio-play" title="오디오 재생">오디오</button> | |
| 79 | + <i class="ico-headphone"></i> | |
| 80 | + <span>듣기 예제</span> | |
| 81 | + <span class="btn circle sm ico-play"></span> | |
| 82 | + </div> | |
| 83 | + <div class="q-file-audio"> | |
| 84 | + <audio controls="controls"> | |
| 85 | + <source src="../../images/main/before_bg_video.mp4" type="video/mp4" /> | |
| 86 | + </audio> | |
| 87 | + </div> | |
| 88 | + <div class="q-file-txt"> | |
| 89 | + 보기 이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까 보기 이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까 보기 이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까 | |
| 90 | + </div> | |
| 91 | + <div class="q-img"> | |
| 92 | + <figure> | |
| 93 | + <img src="../../../../resources/front/site/SITE_00000/images/temp/sample_pic1.png" alt="이미지" /> | |
| 94 | + </figure> | |
| 95 | + </div> | |
| 96 | + </div> | |
| 97 | + </div> | |
| 98 | + <div class="a-area"> | |
| 99 | + <ol class="a-list"> | |
| 100 | + <li class="a-item"> | |
| 101 | + <input type="checkbox" id="a1_1" name="a1" /> | |
| 102 | + <label for="a1_1" class="a-input-label">선택</label> | |
| 103 | + <div class="a-box"> | |
| 104 | + <span class="num">1</span> | |
| 105 | + <div class="a-cont"> | |
| 106 | + <div class="a-txt">'글자 찾기 놀이'의 과정에서 코딩을 하는 과정을 이해할 수 있다.</div> | |
| 107 | + </div> | |
| 108 | + </div> | |
| 109 | + </li> | |
| 110 | + <li class="a-item"> | |
| 111 | + <input type="checkbox" id="a1_2" name="a1" /> | |
| 112 | + <label for="a1_2" class="a-input-label">선택</label> | |
| 113 | + <div class="a-box"> | |
| 114 | + <span class="num">2</span> | |
| 115 | + <div class="a-cont"> | |
| 116 | + <div class="a-txt">'글자 찾기 놀이'의 과정에서 코딩을 하는 과정을 이해할 수 있다.</div> | |
| 117 | + </div> | |
| 118 | + </div> | |
| 119 | + </li> | |
| 120 | + <li class="a-item"> | |
| 121 | + <input type="checkbox" id="a1_3" name="a1" /> | |
| 122 | + <label for="a1_3" class="a-input-label">선택</label> | |
| 123 | + <div class="a-box"> | |
| 124 | + <span class="num">3</span> | |
| 125 | + <div class="a-cont"> | |
| 126 | + <div class="a-txt">'글자 찾기 놀이'의 과정에서 코딩을 하는 과정을 이해할 수 있다.</div> | |
| 127 | + <!-- <div class="a-img"> | |
| 128 | + <figure> | |
| 129 | + <img src="/resources/front/site/SITE_00000/images/temp/img_q.jpg" | |
| 130 | + alt="이미지"> | |
| 131 | + </figure> | |
| 132 | + </div> --> | |
| 133 | + </div> | |
| 134 | + </div> | |
| 135 | + </li> | |
| 136 | + </ol> | |
| 137 | + </div> | |
| 138 | + </li> | |
| 139 | + </ul> | |
| 140 | + <div class="btn-cont"> | |
| 141 | + <button class="btn lg primary">정답 및 풀이 보기</button> | |
| 142 | + </div> | |
| 143 | + </div> | |
| 144 | + </div> | |
| 145 | + <div class="quiz-viewer-fnc"> | |
| 146 | + <button class="btn-prev" disabled><span>이전 문제</span></button> | |
| 147 | + <button class="btn-next"><span>다음 문제</span></button> | |
| 148 | + </div> | |
| 149 | + </div> | |
| 150 | + </div> | |
| 151 | + </div> | |
| 152 | + <div class="viewer-fnc-cont"></div> | |
| 153 | + </div> | |
| 154 | + </section> | |
| 155 | + | |
| 156 | + <!-- toast --> | |
| 157 | + <div class="toast"></div> | |
| 158 | + | |
| 159 | + <!--popup--> | |
| 160 | + <div class="dim"></div> | |
| 161 | + | |
| 162 | + <script> | |
| 163 | + // Audio 객체 설정 | |
| 164 | + let loopCnt = 0; | |
| 165 | + const myAudio = new Audio(); | |
| 166 | + myAudio.src = "https://icdn.itt.link/online/AttachFiles/contents/qesitm/20240124134856136.mp3"; | |
| 167 | + myAudio.loop = false; | |
| 168 | + | |
| 169 | + const btnPlay = document.querySelector(".btn-audio-play"); | |
| 170 | + btnPlay.onclick = function () { | |
| 171 | + if (loopCnt == 0) { | |
| 172 | + myAudio.play(); | |
| 173 | + loopCnt++; | |
| 174 | + this.setAttribute("disabled", true); | |
| 175 | + this.closest('.audio-box').classList.add('is-disabled'); | |
| 176 | + } else { | |
| 177 | + alert("이미 들음"); | |
| 178 | + } | |
| 179 | + } | |
| 180 | + </script> | |
| 181 | + </body> | |
| 182 | +</html> |
+++ html/onSejong/manager/mystorage/testAnswer.html
... | ... | @@ -0,0 +1,216 @@ |
| 1 | +<!DOCTYPE html> | |
| 2 | +<html lang="ko"> | |
| 3 | + <head> | |
| 4 | + <title>온세종학교</title> | |
| 5 | + | |
| 6 | + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| 7 | + <meta name="Author" content="" /> | |
| 8 | + <meta name="Keywords" content="" /> | |
| 9 | + <meta name="Description" content="" /> | |
| 10 | + <meta name="format-detection" content="telephone=no" /> | |
| 11 | + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| 12 | + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" /> | |
| 13 | + | |
| 14 | + <link href="/resources/front/site/SITE_00000/css/style.css" rel="stylesheet" /> | |
| 15 | + | |
| 16 | + <!-- 공통 plugin --> | |
| 17 | + <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-3.6.0.min.js"></script> | |
| 18 | + <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-ui.min.js"></script> | |
| 19 | + <!-- //공통 plugin --> | |
| 20 | + | |
| 21 | + <!-- 페이지 plugin--> | |
| 22 | + <!-- //페이지 plugin--> | |
| 23 | + <!-- 공통 퍼블 layout: 개발시 삭제--> | |
| 24 | + <!-- <script src="/resources/front/site/SITE_00000/js/_layout.js"></script> --> | |
| 25 | + <!--//퍼블 layout--> | |
| 26 | + | |
| 27 | + <!-- 공통 메뉴 js--> | |
| 28 | + <!-- //공통 메뉴 js --> | |
| 29 | + | |
| 30 | + <!--공통 퍼블 js--> | |
| 31 | + <script src="/resources/front/site/SITE_00000/js/common.js"></script> | |
| 32 | + <script src="/resources/front/site/SITE_00000/js/common-custom.js"></script> | |
| 33 | + <!--//공통 퍼블 js--> | |
| 34 | + </head> | |
| 35 | + | |
| 36 | + <body> | |
| 37 | + <section class="viewer"> | |
| 38 | + <header class="viewer-header"> | |
| 39 | + <div class="viewer-tit"> | |
| 40 | + <ul class="info-inline-list"> | |
| 41 | + <li> | |
| 42 | + <strong class="info-tit">문항ID</strong> | |
| 43 | + <div class="txt-area">612483</div> | |
| 44 | + </li> | |
| 45 | + </ul> | |
| 46 | + <h1>활동1 무늬를 꾸며보는 방법 알아보기</h1> | |
| 47 | + </div> | |
| 48 | + <button type="button" class="btn sm"> | |
| 49 | + <i class="ico-logout"></i> | |
| 50 | + 나가기 | |
| 51 | + </button> | |
| 52 | + <div class="viewer-fnc-mo"> | |
| 53 | + <div class="etc-fnc-area"> | |
| 54 | + <button type="button" class="btn-etc-fnc btn-ico ico-more-vert">더보기</button> | |
| 55 | + <ul class="etc-fnc"> | |
| 56 | + <li><button type="button">문항 오류신고</button></li> | |
| 57 | + </ul> | |
| 58 | + </div> | |
| 59 | + </div> | |
| 60 | + </header> | |
| 61 | + <div class="viewer-body"> | |
| 62 | + <div class="viewer-cont"> | |
| 63 | + <div class="quiz-viewer"> | |
| 64 | + <div class="quiz-viewer-body"> | |
| 65 | + <div class="quiz-viewer-header"> | |
| 66 | + <ul class="info"> | |
| 67 | + <li> | |
| 68 | + <strong>현재 문제</strong> | |
| 69 | + <div class="txt-area"> | |
| 70 | + <strong>2</strong> | |
| 71 | + / 3 | |
| 72 | + </div> | |
| 73 | + </li> | |
| 74 | + <li> | |
| 75 | + <strong>배점</strong> | |
| 76 | + <div class="txt-area">5점</div> | |
| 77 | + </li> | |
| 78 | + </ul> | |
| 79 | + </div> | |
| 80 | + <div class="quiz-viewer-cont"> | |
| 81 | + <div class="quiz-viewer-wrap"> | |
| 82 | + <ul class="viewer-q-list"> | |
| 83 | + <li class="q-item"> | |
| 84 | + <div class="q-area"> | |
| 85 | + <div class="q-tit"> | |
| 86 | + <span class="num">1</span> | |
| 87 | + <div class="q-txt"> | |
| 88 | + <p>이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까?</p> | |
| 89 | + </div> | |
| 90 | + </div> | |
| 91 | + <div class="q-file-area"> | |
| 92 | + <div class="audio-box"> | |
| 93 | + <button type="button" class="btn-audio-play" title="오디오 재생">오디오</button> | |
| 94 | + <i class="ico-headphone"></i> | |
| 95 | + <span>듣기 예제</span> | |
| 96 | + <span class="btn circle sm ico-play"></span> | |
| 97 | + </div> | |
| 98 | + <div class="q-file-audio"> | |
| 99 | + <audio controls="controls"> | |
| 100 | + <source src="../../images/main/before_bg_video.mp4" type="video/mp4" /> | |
| 101 | + </audio> | |
| 102 | + </div> | |
| 103 | + <div class="q-file-txt"> | |
| 104 | + 보기 이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까 보기 이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까 보기 이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까 | |
| 105 | + </div> | |
| 106 | + <div class="q-img"> | |
| 107 | + <figure> | |
| 108 | + <img src="../../../../resources/front/site/SITE_00000/images/temp/sample_pic1.png" alt="이미지" /> | |
| 109 | + </figure> | |
| 110 | + </div> | |
| 111 | + </div> | |
| 112 | + </div> | |
| 113 | + <div class="a-area"> | |
| 114 | + <ol class="a-list"> | |
| 115 | + <li class="a-item a-o"> | |
| 116 | + <input type="checkbox" id="a1_1" name="a1" disabled> | |
| 117 | + <label for="a1_1" class="a-input-label">선택</label> | |
| 118 | + <span class="label-q-o">정답</span> | |
| 119 | + <div class="a-box"> | |
| 120 | + <span class="num">1</span> | |
| 121 | + <div class="a-cont"> | |
| 122 | + <div class="a-txt"> | |
| 123 | + '글자 찾기 놀이'의 과정에서 코딩을 하는 과정을 이해할 수 있다. | |
| 124 | + </div> | |
| 125 | + </div> | |
| 126 | + </div> | |
| 127 | + </li> | |
| 128 | + <li class="a-item a-x"> | |
| 129 | + <input type="checkbox" id="a1_2" name="a1" disabled checked> | |
| 130 | + <label for="a1_2" class="a-input-label">선택</label> | |
| 131 | + <span class="label-q-x">오답</span> | |
| 132 | + <div class="a-box"> | |
| 133 | + <span class="num">2</span> | |
| 134 | + <div class="a-cont"> | |
| 135 | + <div class="a-txt"> | |
| 136 | + '글자 찾기 놀이'의 과정에서 코딩을 하는 과정을 이해할 수 있다. | |
| 137 | + </div> | |
| 138 | + </div> | |
| 139 | + </div> | |
| 140 | + </li> | |
| 141 | + <li class="a-item"> | |
| 142 | + <input type="checkbox" id="a1_3" name="a1" disabled > | |
| 143 | + <label for="a1_3" class="a-input-label">선택</label> | |
| 144 | + <div class="a-box"> | |
| 145 | + <span class="num">3</span> | |
| 146 | + <div class="a-cont"> | |
| 147 | + <div class="a-txt"> | |
| 148 | + '글자 찾기 놀이'의 과정에서 코딩을 하는 과정을 이해할 수 있다. | |
| 149 | + </div> | |
| 150 | + </div> | |
| 151 | + </div> | |
| 152 | + </li> | |
| 153 | + </ol> | |
| 154 | + </div> | |
| 155 | + </li> | |
| 156 | + </ul> | |
| 157 | + <ul class="q-comment"> | |
| 158 | + <li> | |
| 159 | + <strong class="info-tit">정답</strong> | |
| 160 | + <div class="txt-area"><strong>3번, 5번</strong></div> | |
| 161 | + </li> | |
| 162 | + <li> | |
| 163 | + <strong class="info-tit">풀이</strong> | |
| 164 | + <div class="txt-area"> | |
| 165 | + <div class="q-file-area"> | |
| 166 | + <div class="q-file-txt"> | |
| 167 | + 이 문제는 두 개의 괄호가 주어진 경우로 둘 중 하나만 정확히 알면 쉽게 정답에 접근할 수 있는 문제이다.<br> | |
| 168 | + ①의 경우 왜냐하면 이하를 먼저 해석하여 아이들이 TV영향을 쉽게 받는다를 유추할 수 있고 ②의 경우는 "말다툼"이 핵심 어구로서 "화해하다"와 연결할 수 있을 것이다. | |
| 169 | + </div> | |
| 170 | + </div> | |
| 171 | + </div> | |
| 172 | + </li> | |
| 173 | + </ul> | |
| 174 | + <div class="btn-cont"> | |
| 175 | + <button class="btn lg primary">다시 풀기</button> | |
| 176 | + </div> | |
| 177 | + </div> | |
| 178 | + </div> | |
| 179 | + <div class="quiz-viewer-fnc"> | |
| 180 | + <button class="btn-prev" disabled><span>이전 문제</span></button> | |
| 181 | + <button class="btn-next"><span>다음 문제</span></button> | |
| 182 | + </div> | |
| 183 | + </div> | |
| 184 | + </div> | |
| 185 | + </div> | |
| 186 | + <div class="viewer-fnc-cont"></div> | |
| 187 | + </div> | |
| 188 | + </section> | |
| 189 | + | |
| 190 | + <!-- toast --> | |
| 191 | + <div class="toast"></div> | |
| 192 | + | |
| 193 | + <!--popup--> | |
| 194 | + <div class="dim"></div> | |
| 195 | + | |
| 196 | + <script> | |
| 197 | + // Audio 객체 설정 | |
| 198 | + let loopCnt = 0; | |
| 199 | + const myAudio = new Audio(); | |
| 200 | + myAudio.src = "https://icdn.itt.link/online/AttachFiles/contents/qesitm/20240124134856136.mp3"; | |
| 201 | + myAudio.loop = false; | |
| 202 | + | |
| 203 | + const btnPlay = document.querySelector(".btn-audio-play"); | |
| 204 | + btnPlay.onclick = function () { | |
| 205 | + if (loopCnt == 0) { | |
| 206 | + myAudio.play(); | |
| 207 | + loopCnt++; | |
| 208 | + this.setAttribute("disabled", true); | |
| 209 | + this.closest('.audio-box').classList.add('is-disabled'); | |
| 210 | + } else { | |
| 211 | + alert("이미 들음"); | |
| 212 | + } | |
| 213 | + } | |
| 214 | + </script> | |
| 215 | + </body> | |
| 216 | +</html> |
+++ html/onSejong/manager/mystorage/testView.html
... | ... | @@ -0,0 +1,197 @@ |
| 1 | +<!DOCTYPE html> | |
| 2 | +<html lang="ko"> | |
| 3 | + <head> | |
| 4 | + <title>온세종학교</title> | |
| 5 | + | |
| 6 | + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| 7 | + <meta name="Author" content="" /> | |
| 8 | + <meta name="Keywords" content="" /> | |
| 9 | + <meta name="Description" content="" /> | |
| 10 | + <meta name="format-detection" content="telephone=no" /> | |
| 11 | + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| 12 | + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" /> | |
| 13 | + | |
| 14 | + <link href="/resources/front/site/SITE_00000/css/style.css" rel="stylesheet" /> | |
| 15 | + | |
| 16 | + <!-- 공통 plugin --> | |
| 17 | + <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-3.6.0.min.js"></script> | |
| 18 | + <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-ui.min.js"></script> | |
| 19 | + <!-- //공통 plugin --> | |
| 20 | + | |
| 21 | + <!-- 페이지 plugin--> | |
| 22 | + <!-- //페이지 plugin--> | |
| 23 | + <!-- 공통 퍼블 layout: 개발시 삭제--> | |
| 24 | + <!-- <script src="/resources/front/site/SITE_00000/js/_layout.js"></script> --> | |
| 25 | + <!--//퍼블 layout--> | |
| 26 | + | |
| 27 | + <!-- 공통 메뉴 js--> | |
| 28 | + <!-- //공통 메뉴 js --> | |
| 29 | + | |
| 30 | + <!--공통 퍼블 js--> | |
| 31 | + <script src="/resources/front/site/SITE_00000/js/common.js"></script> | |
| 32 | + <script src="/resources/front/site/SITE_00000/js/common-custom.js"></script> | |
| 33 | + <!--//공통 퍼블 js--> | |
| 34 | + </head> | |
| 35 | + | |
| 36 | + <body> | |
| 37 | + <section class="viewer"> | |
| 38 | + <header class="viewer-header"> | |
| 39 | + <div class="viewer-tit"> | |
| 40 | + <ul class="info-inline-list"> | |
| 41 | + <li> | |
| 42 | + <strong class="info-tit">문항ID</strong> | |
| 43 | + <div class="txt-area">612483</div> | |
| 44 | + </li> | |
| 45 | + </ul> | |
| 46 | + <h1>활동1 무늬를 꾸며보는 방법 알아보기</h1> | |
| 47 | + </div> | |
| 48 | + <button type="button" class="btn sm"> | |
| 49 | + <i class="ico-logout"></i> | |
| 50 | + 나가기 | |
| 51 | + </button> | |
| 52 | + <div class="viewer-fnc-mo"> | |
| 53 | + <div class="etc-fnc-area"> | |
| 54 | + <button type="button" class="btn-etc-fnc btn-ico ico-more-vert">더보기</button> | |
| 55 | + <ul class="etc-fnc"> | |
| 56 | + <li><button type="button">문항 오류신고</button></li> | |
| 57 | + </ul> | |
| 58 | + </div> | |
| 59 | + </div> | |
| 60 | + </header> | |
| 61 | + <div class="viewer-body"> | |
| 62 | + <div class="viewer-cont"> | |
| 63 | + <div class="quiz-viewer"> | |
| 64 | + <div class="quiz-viewer-header"> | |
| 65 | + <ul class="info"> | |
| 66 | + <li> | |
| 67 | + <strong>현재 문제</strong> | |
| 68 | + <div class="txt-area"> | |
| 69 | + <strong>2</strong> | |
| 70 | + / 3 | |
| 71 | + </div> | |
| 72 | + </li> | |
| 73 | + <li> | |
| 74 | + <strong>배점</strong> | |
| 75 | + <div class="txt-area">5점</div> | |
| 76 | + </li> | |
| 77 | + </ul> | |
| 78 | + </div> | |
| 79 | + <div class="quiz-viewer-body"> | |
| 80 | + <div class="quiz-viewer-cont"> | |
| 81 | + <div class="quiz-viewer-wrap"> | |
| 82 | + <ul class="viewer-q-list"> | |
| 83 | + <li class="q-item"> | |
| 84 | + <div class="q-area"> | |
| 85 | + <div class="q-tit"> | |
| 86 | + <span class="num">1</span> | |
| 87 | + <div class="q-txt"> | |
| 88 | + <p>이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까?</p> | |
| 89 | + </div> | |
| 90 | + </div> | |
| 91 | + <div class="q-file-area"> | |
| 92 | + <div class="audio-box"> | |
| 93 | + <button type="button" class="btn-audio-play" title="오디오 재생">오디오</button> | |
| 94 | + <i class="ico-headphone"></i> | |
| 95 | + <span>듣기 예제</span> | |
| 96 | + <span class="btn circle sm ico-play"></span> | |
| 97 | + </div> | |
| 98 | + <div class="q-file-audio"> | |
| 99 | + <audio controls="controls"> | |
| 100 | + <source src="../../images/main/before_bg_video.mp4" type="video/mp4" /> | |
| 101 | + </audio> | |
| 102 | + </div> | |
| 103 | + <div class="q-file-txt"> | |
| 104 | + 보기 이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까 보기 이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까 보기 이 글에서 알 수 있는 코딩에 대한 내용으로 알맞지 않은 것은 무엇입니까 | |
| 105 | + </div> | |
| 106 | + <div class="q-img"> | |
| 107 | + <figure> | |
| 108 | + <img src="../../../../resources/front/site/SITE_00000/images/temp/sample_pic1.png" alt="이미지" /> | |
| 109 | + </figure> | |
| 110 | + </div> | |
| 111 | + </div> | |
| 112 | + </div> | |
| 113 | + <div class="a-area"> | |
| 114 | + <ol class="a-list"> | |
| 115 | + <li class="a-item"> | |
| 116 | + <input type="checkbox" id="a1_1" name="a1" /> | |
| 117 | + <label for="a1_1" class="a-input-label">선택</label> | |
| 118 | + <div class="a-box"> | |
| 119 | + <span class="num">1</span> | |
| 120 | + <div class="a-cont"> | |
| 121 | + <div class="a-txt">'글자 찾기 놀이'의 과정에서 코딩을 하는 과정을 이해할 수 있다.</div> | |
| 122 | + </div> | |
| 123 | + </div> | |
| 124 | + </li> | |
| 125 | + <li class="a-item"> | |
| 126 | + <input type="checkbox" id="a1_2" name="a1" /> | |
| 127 | + <label for="a1_2" class="a-input-label">선택</label> | |
| 128 | + <div class="a-box"> | |
| 129 | + <span class="num">2</span> | |
| 130 | + <div class="a-cont"> | |
| 131 | + <div class="a-txt">'글자 찾기 놀이'의 과정에서 코딩을 하는 과정을 이해할 수 있다.</div> | |
| 132 | + </div> | |
| 133 | + </div> | |
| 134 | + </li> | |
| 135 | + <li class="a-item"> | |
| 136 | + <input type="checkbox" id="a1_3" name="a1" /> | |
| 137 | + <label for="a1_3" class="a-input-label">선택</label> | |
| 138 | + <div class="a-box"> | |
| 139 | + <span class="num">3</span> | |
| 140 | + <div class="a-cont"> | |
| 141 | + <div class="a-txt">'글자 찾기 놀이'의 과정에서 코딩을 하는 과정을 이해할 수 있다.</div> | |
| 142 | + <!-- <div class="a-img"> | |
| 143 | + <figure> | |
| 144 | + <img src="/resources/front/site/SITE_00000/images/temp/img_q.jpg" | |
| 145 | + alt="이미지"> | |
| 146 | + </figure> | |
| 147 | + </div> --> | |
| 148 | + </div> | |
| 149 | + </div> | |
| 150 | + </li> | |
| 151 | + </ol> | |
| 152 | + </div> | |
| 153 | + </li> | |
| 154 | + </ul> | |
| 155 | + <div class="btn-cont"> | |
| 156 | + <button class="btn lg primary">정답 및 풀이 보기</button> | |
| 157 | + </div> | |
| 158 | + </div> | |
| 159 | + </div> | |
| 160 | + <div class="quiz-viewer-fnc"> | |
| 161 | + <button class="btn-prev" disabled><span>이전 문제</span></button> | |
| 162 | + <button class="btn-next"><span>다음 문제</span></button> | |
| 163 | + </div> | |
| 164 | + </div> | |
| 165 | + </div> | |
| 166 | + </div> | |
| 167 | + <div class="viewer-fnc-cont"></div> | |
| 168 | + </div> | |
| 169 | + </section> | |
| 170 | + | |
| 171 | + <!-- toast --> | |
| 172 | + <div class="toast"></div> | |
| 173 | + | |
| 174 | + <!--popup--> | |
| 175 | + <div class="dim"></div> | |
| 176 | + | |
| 177 | + <script> | |
| 178 | + // Audio 객체 설정 | |
| 179 | + let loopCnt = 0; | |
| 180 | + const myAudio = new Audio(); | |
| 181 | + myAudio.src = "https://icdn.itt.link/online/AttachFiles/contents/qesitm/20240124134856136.mp3"; | |
| 182 | + myAudio.loop = false; | |
| 183 | + | |
| 184 | + const btnPlay = document.querySelector(".btn-audio-play"); | |
| 185 | + btnPlay.onclick = function () { | |
| 186 | + if (loopCnt == 0) { | |
| 187 | + myAudio.play(); | |
| 188 | + loopCnt++; | |
| 189 | + this.setAttribute("disabled", true); | |
| 190 | + this.closest('.audio-box').classList.add('is-disabled'); | |
| 191 | + } else { | |
| 192 | + alert("이미 들음"); | |
| 193 | + } | |
| 194 | + } | |
| 195 | + </script> | |
| 196 | + </body> | |
| 197 | +</html> |
--- html/onSejong/member/class/pop_studentReflection.html
+++ html/onSejong/member/class/pop_studentReflection.html
... | ... | @@ -41,12 +41,62 @@ |
| 41 | 41 |
</head> |
| 42 | 42 |
|
| 43 | 43 |
<body> |
| 44 |
- <div class="popup-modal sm" data-popuppub="popupmodal"> |
|
| 44 |
+ <div class="popup-modal" data-popuppub="popupmodal"> |
|
| 45 | 45 |
<div class="pop-header"> |
| 46 | 46 |
<h1>성찰일지</h1> |
| 47 | 47 |
</div> |
| 48 | 48 |
<div class="pop-body"> |
| 49 |
- <textarea placeholder="학습 후 느끼는 점을 입력하세요." title="텍스트 입력"></textarea> |
|
| 49 |
+ <div class="write-type"> |
|
| 50 |
+ <table> |
|
| 51 |
+ <caption>성찰일지 상세</caption> |
|
| 52 |
+ <colgroup> |
|
| 53 |
+ <col style="width: 160px" /> |
|
| 54 |
+ <col /> |
|
| 55 |
+ </colgroup> |
|
| 56 |
+ <tbody> |
|
| 57 |
+ <tr> |
|
| 58 |
+ <th scope="row">활동 주제</th> |
|
| 59 |
+ <td> |
|
| 60 |
+ <input type="text" title="활동 주제 입력" class="q4" placeholder="내용을 입력하세요." /> |
|
| 61 |
+ </td> |
|
| 62 |
+ </tr> |
|
| 63 |
+ <tr> |
|
| 64 |
+ <th scope="row">활동 일자</th> |
|
| 65 |
+ <td>2025-09-30(월) 15:20</td> |
|
| 66 |
+ </tr> |
|
| 67 |
+ <tr> |
|
| 68 |
+ <th scope="row">활동 목적</th> |
|
| 69 |
+ <td> |
|
| 70 |
+ <input type="text" title="활동 목적 입력" class="q4" placeholder="내용을 입력하세요." /> |
|
| 71 |
+ </td> |
|
| 72 |
+ </tr> |
|
| 73 |
+ <tr> |
|
| 74 |
+ <th scope="row">활동 참여자</th> |
|
| 75 |
+ <td> |
|
| 76 |
+ <input type="text" title="활동 참여자 입력" class="q4" placeholder="내용을 입력하세요." /> |
|
| 77 |
+ </td> |
|
| 78 |
+ </tr> |
|
| 79 |
+ <tr> |
|
| 80 |
+ <th scope="row">활동 내용</th> |
|
| 81 |
+ <td> |
|
| 82 |
+ <textarea placeholder="내용을 입력하세요." title="활동 내용 입력"></textarea> |
|
| 83 |
+ </td> |
|
| 84 |
+ </tr> |
|
| 85 |
+ <tr> |
|
| 86 |
+ <th scope="row">참고 문헌</th> |
|
| 87 |
+ <td> |
|
| 88 |
+ <textarea placeholder="내용을 입력하세요." title="참고 문헌 입력"></textarea> |
|
| 89 |
+ </td> |
|
| 90 |
+ </tr> |
|
| 91 |
+ <tr> |
|
| 92 |
+ <th scope="row">배운점</th> |
|
| 93 |
+ <td> |
|
| 94 |
+ <textarea placeholder="내용을 입력하세요." title="배운점 입력"></textarea> |
|
| 95 |
+ </td> |
|
| 96 |
+ </tr> |
|
| 97 |
+ </tbody> |
|
| 98 |
+ </table> |
|
| 99 |
+ </div> |
|
| 50 | 100 |
</div> |
| 51 | 101 |
|
| 52 | 102 |
<div class="pop-footer"> |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?