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/_layout.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> <div class="accessibility"> <a href="#skipToContents" title="콘텐츠를 바로 볼 수 있도록 건너뛰기합니다.">콘텐츠 바로가기</a> </div>  <div class="container">  <header class="site-header"></header> <div class="site-body" id="skipToContents"> <div class="wrap"> <div class="page-tit-area"> <div class="l-area"> <h2 class="title-xlg">과제 만들기</h2> </div> <div class="r-area"> <div class="btn-group"> <button type="button" class="btn secondary">과제 가져오기</button> </div> </div> </div> <section class="section"> <div class="section-tit-area"> <div class="l-area"> <h3 class="txt-hide">기본 정보</h3> </div> <div class="r-area"> <p class="msg"><i class="required">*<span class="txt-hide">필수</span></i> 필수 입력</p> </div> </div> <div class="write-type"> <table> <caption>기본 정보 입력</caption> <colgroup> <col style="width: 160px;"> <col> </colgroup> <tbody> <tr> <th scope="row">제목<i class="required">필수</i></th> <td> <input type="text" placeholder="제목을 입력하세요." title="제목을 입력하세요." class="q4"> </td> </tr> <tr> <th scope="row">제출 기간<i class="required">필수</i></th> <td> <fieldset> <legend>제출 기간</legend> <div class="checkradio"> <input type="radio" name="radio" id="r1"> <label for="r1">기한없음</label> </div> <div class="checkradio"> <input type="radio" name="radio" id="r2"> <label for="r2">기한설정</label> <div class="time-set checkradio-option"> <input type="date"> <select title="선택"> <option value="00">00</option> </select> <span>:</span> <select title="선택"> <option value="00">00</option> </select> <span>-</span> <input type="date"> <select title="선택"> <option value="00">00</option> </select> <span>:</span> <select title="선택"> <option value="00">00</option> </select> </div> </div> </fieldset> </td> </tr> <tr> <th scope="row">채점 방식<i class="required">필수</i></th> <td> <fieldset class="checkradio-area"> <legend>채점 방식 선택</legend> <ul class="bullet-none"> <li> <div class="checkradio"> <input type="radio" name="r3" id="r3-1" checked> <label for="r3-1">점수채점</label> <div class="checkradio-option"> <select title="모둠 선택1" class="sm"> <option>점수 선택</option> </select> <select title="모둠 선택2" class="sm"> <option>점수 선택</option> </select> </div> </div> </li> <li> <div class="checkradio"> <input type="radio" name="r3" id="r3-2"> <label for="r3-2">루브릭</label> <div class="checkradio-option"> <select title="모둠 선택1" class="sm"> <option>루브릭 선택</option> </select> <select title="모둠 선택2" class="sm"> <option>루브릭선택</option> </select> </div> </div> </li> <li> <div class="checkradio"> <input type="radio" name="r3" id="r3-3"> <label for="r3-3">미채점</label> </div> </li> </ul> </fieldset> </td> </tr> <tr> <th scope="row">제출 대상<i class="required">필수</i></th> <td> <fieldset> <legend>제출 대상</legend> <ul class="bullet-none"> <li> <div class="checkradio"> <input type="radio" name="r4" id="r4-1"> <label for="r4-1">수강생 전체</label> </div> </li> <li> <div class="checkradio"> <input type="radio" name="r4" id="r4-2"> <label for="r4-2">선택입력</label> <div class="checkradio-option"> <button class="btn sm secondary">수강생 선택</button> <span>135명</span> </div> </div> </li> <li> <div class="checkradio"> <input type="radio" name="r4" id="r4-3" checked> <label for="r4-3">그룹 선택</label> <div class="checkradio-option"> <select title="그룹 선택1" class="sm"> <option>그룹 선택</option> </select> </div> </div> <div class="item-add-area"> <div class="chip-area"> <span class="chip-tag"> 추가된 모둠명1 <button type="button" class="ico-delete">삭제</button> </span> <span class="chip-tag"> 추가된 모둠명2 <button type="button" class="ico-delete">삭제</button> </span> </div> </div> </li> </ul> </fieldset> </td> </tr> <tr> <th scope="row">공개옵션</th> <td> <fieldset class="checkradio-area"> <legend>공개옵션 선택</legend> <div class="checkradio"> <input type="checkbox" id="chk1-1"> <label for="chk1-1">수강생 멤버간 공개</label> </div> <div class="checkradio"> <input type="checkbox" id="chk1-2"> <label for="chk1-2">우수과제물만 공개</label> </div> </fieldset> </td> </tr> <tr> <th scope="row">조건 설정</th> <td> <fieldset class="checkradio-area"> <legend>조건 설정</legend> <div class="checkradio"> <input type="checkbox" id="chk4-1"> <label for="chk4-1">마감 후 수정</label> </div> <div class="checkradio"> <input type="checkbox" id="chk4-2"> <label for="chk4-2">마감 후 제출</label> </div> <div class="checkradio"> <input type="checkbox" id="chk4-3"> <label for="chk4-3">파일 첨부</label> </div> </fieldset> </td> </tr> <tr> <th scope="row">설명</th> <td>-에디터-</td> </tr> <tr> <th scope="row">참고자료</th> <td> <div class="btn-group"> <button type="button" class="btn ico-archive">나의 보관함에서 선택</button> <button type="button" class="btn ico-search">콘텐츠 은행에서 검색</button> </div> <div class="item-add-area"> <ul class="item-list sm col3"> <li> <span class="label num">1</span> <div class="txt-area"> <div class="item-info"> <div class="img-area"> <figure> <img src="/resources/front/site/SITE_00000/images/temp/thumb2.jpg" alt="이미지"> </figure> </div> <div class="txt-area"> <div class="label-area"> <span class="label-cont-img">이미지</span> </div> <div class="editor-cont">이미지 있음 콘텐츠</div> </div> </div> </div> <div class="fnc"> <div class="btn-group"> <button type="button" class="btn ghost sm ico-delete circle"></button> </div> </div> </li> <li> <span class="label num">2</span> <div class="txt-area"> <div class="item-info"> <div class="txt-area"> <div class="label-area"> <span class="label-cont-test">평가지</span> </div> <div class="editor-cont">문서 콘텐츠</div> </div> </div> </div> <div class="fnc"> <div class="btn-group"> <button type="button" class="btn ghost sm ico-delete circle"></button> </div> </div> </li> </ul> </div> <div class="item-add-area"> <ul class="item-list sm col3"></ul> </div> </td> </tr> <tr> <th scope="row">과제물 선택</th> <td> <div class="file-drag-area"> <input type="file" class="input-file"> <p>첨부할 파일을 여기에 끌어다 놓거나, 버튼을 눌러 파일을 직접 선택해주세요.<br> 대용량 파일(최대300MB)을 업로드 할 경우 서비스 적용에 다소 시간이 소요될 수 있습니다.</p> <span class="btn ico-upload primary">파일 선택</span> </div> <div class="item-list-box drag-file-list"> <div class="item"> <div class="txt-area"> <i class="ico-attach"></i> <p class="txt"> 첨부파일명.pdf </p> <small>124kb</small> </div> <div class="item-fnc-area"> <a href="#none" class="ico-download">다운로드</a> <button type="button" class="ico-delete">삭제</button> </div> </div> </div> </td> </tr> <tr> <th scope="row">과제물 유형 <i class="required">필수수</i></th> <td> <fieldset class="checkradio-area"> <legend>과제물 유형형</legend> <div class="checkradio"> <input type="radio" name="radio5" id="radio5-1" checked> <label for="radio5-1">일반적인 게시물</label> </div> <div class="checkradio"> <input type="radio" name="radio5" id="radio5-2"> <label for="radio5-2">항목으로 지정된 형식</label> </div> </fieldset> </td> </tr> </tbody> </table> </div> </section> <section class="section"> <header class="section-tit-area"> <div class="l-area dir-col"> <h3 class="title-lg">학생들이 제출할 서식 만들기</h3> <p>학생들 과제가 제출된 후에는 절대로 항목 명칭과 순서를 변경하면 안 됩니다.</p> </div> </header> <div class="form-write"> <div class="form-section bg-area"> <div class="form-section-body wrap-sm"> <div class="form-item-list"> <div class="form-item"> <ol class="a-write-list"> <li class="a-item"> <i class="ico-move"></i> <div class="a-info"> <span class="label num">1</span> </div> <div class="a-cont"> <div class="a-txt"> <input type="text" placeholder="질문을 입력하세요."> </div> </div> <div class="a-fnc"> <button class="btn sm circle danger ico-delete">삭제</button> </div> </li> <li class="a-item"> <i class="ico-move"></i> <div class="a-info"> <span class="label num">2</span> </div> <div class="a-cont"> <div class="a-txt"> <input type="text" placeholder="질문을 입력하세요."> </div> </div> <div class="a-fnc"> <button class="btn sm circle danger ico-delete">삭제</button> </div> </li> </ol> <div class="form-item-fnc"> <div class="l-area"> <a href="#none" class="btn-text primary">항목추가 <i class="ico-form-plus primary"></i></a> </div> </div> </div> </div> </div> </div> </div> </section> <div class="btn-cont"> <a href="#none" class="btn lg">취소</a> <a href="#none" class="btn lg primary">등록</a> </div> </div> </div> <footer class="site-footer"></footer> </div>  <div class="toast"></div>  <div class="dim"></div> <script> $(document).ready(function () { const maxFileSize = 300 * 1024 * 1024; //300mb const maxFileCount = 1; // 드래그 앤 드롭 이벤트 핸들링 $('.file-drag-area').each(function () { const $fileDragArea = $(this); const $fileList = $fileDragArea.siblings('.drag-file-list'); $fileDragArea.on('dragover', function (e) { e.preventDefault(); e.stopPropagation(); $fileDragArea.addClass('is-dragover'); }); $fileDragArea.on('dragleave', function (e) { e.preventDefault(); e.stopPropagation(); $fileDragArea.removeClass('is-dragover'); }); $fileDragArea.on('drop', function (e) { e.preventDefault(); e.stopPropagation(); $fileDragArea.removeClass('is-dragover'); const files = e.originalEvent.dataTransfer.files; if (files.length > maxFileCount) { alert(`파일은 최대 ${maxFileCount}개만 업로드할 수 있습니다.`); return; } handleFiles(files, $fileList); }); // 파일 선택 버튼 클릭 시 $fileDragArea.find('.input-file').on('change', function () { const files = this.files; if (files.length > maxFileCount) { alert(`파일은 최대 ${maxFileCount}개만 업로드할 수 있습니다.`); return; } handleFiles(files, $fileList); }); }); function handleFiles(files, $fileList) { for (const file of files) { if (file.size > maxFileSize) { alert(`${file.name}은(는) 파일 크기 제한(500KB)을 초과했습니다.`); continue; } const fileItem = ` <div class="item"> <div class="txt-area"> <i class="ico-attach"></i> <p class="txt"> ${file.name} </p> <small>${(file.size / 1024).toFixed(2)} KB</small> </div> <div class="item-fnc-area"> <a href="#none" class="ico-download">다운로드</a> <button type="button" class="ico-delete">삭제</button> </div> </div> `; $fileList.append(fileItem); } } // 파일 삭제 버튼 클릭 시 $(document).on('click', '.item .ico-delete', function () { $(this).closest('.item').remove(); }); }); </script> <script> $(document).ready(function () { $(".a-write-list").sortable({ handle: $(".a-write-list > li").find(".ico-move"), containment: "parent", update: function (event, ui) { var $list = $(this).children("li"); $list.each(function () { var $li = $(this); var newVal = $(this).index() + 1; $(this).find(".num").html(newVal); }); }, }); }); </script> </body> </html>