exam wizard
1.0.0
시험 마법사 jQuery 플러그인 처리, 질문, 답변, 쉽게 답변, 시험 구축, 설문 조사, 질문자
이 확장을 설치하는 선호하는 방법은 작곡가를 통하는 것입니다.
어느 쪽이든
php composer.phar require --prefer-dist aneeshikmat/exam-wizard "*@dev"
이 플러그인을 사용하려면이 템플릿과 같은 코드를 작성해야합니다 (기본 사용).
<!-- Html Template -->
<form id="examwizard-question"><!-- examwizard-question #id selector for exam form(you can update it by option -->
<div class="yourClass" data-question="1">
------
<input type="radio" data-alternatetype="radio" name="fieldName[0]" data-alternateName="answer[0]" data-alternateValue="A" value="1"/>
------
</div>
<div class="yourClass hidden" data-question="2"><!-- We Add hidden class here -->
------
<input type="radio" data-alternatetype="radio" name="fieldName[1]" data-alternateName="answer[1]" data-alternateValue="A" value="1"/>
------
</div>
<!-- Hidden field, save current question number, marked values, total of question -->
<input type="hidden" value="1" id="currentQuestionNumber" name="currentQuestionNumber" />
<input type="hidden" value="18" id="totalOfQuestion" name="totalOfQuestion" />
<input type="hidden" value="[]" id="markedQuestion" name="markedQuestions" />
</form>
<!-- Scripts -->
<script src="js/jquery.js"></script><!-- Required -->
<script src="js/examwizard.min.js"></script><!-- Required -->
<script>
var examWizard = $.fn.examWizard();
</script>
보시다시피, 매우 간단하고 이제 우리는이 코드를 설명하고 모든 옵션을 표시하여 우리를 도울 수 있습니다.
<script>
var examWizard = $.fn.examWizard({
formSelector: "#new-examwizard-question",
});
</script>
싸개
질문 필드 대부분은이 규칙을 사용하여 다음과 같습니다.
a. data-alternatetype: this data attribute has an field type.(required).
b. data-alternateName: this data attribute has an alternate name, this is useful to keep field name without any update, its useful if you need to update old form, use in cms or fremwork, alternateName most has value like this rule "answer[question-number - 1]" so that if we on question 1 thats mean alternateName="answerd[0]".(required)
c. data-alternateValue: this data attribute has an alternate value for field, its useful on quick access menu, its will be display a readable value for user, for example if field value is 1 and data-alternateValue="A" then the displayed value will be is "A" not "1".(Optional)
#currentQuestionNumber 필드는 숨겨진 필드입니다. 현재 질문 번호, init value = 1입니다.
#TotalOfQuestion Field는 숨겨진 필드 저장 총 질문 번호이며, 가장 많은 질문이 될 수 있습니다. (이 예에서는 18 개의 질문이 있으므로 시험 와이즈가 18 개의 질문 만 처리 할 수 있습니다.
#MARKEDQUESTION 필드는 숨겨진 필드입니다. 모든 표시된 값을 저장하고 기본값은 빈 배열 "[]"입니다. (마크 옵션을 비활성화 한 경우이 필드가 필요하지 않습니다).
빠른 액세스 섹션 사용자와 표시된 링크의 답변 입력을 표시하는 데 유용한 간단한 레이아웃입니다.이 옵션은 기본적으로 활성화됩니다.
<!-- Quick Access Html Template -->
<div class="col-xs-3" id="quick-access-section">
<table> <!-- You can use table, or any other html tag like div, spans..etc -->
<tr class="question-response-rows" data-question="1">
<td>1</td>
<td class="question-response-rows-value">-</td>
</tr>
<tr class="question-response-rows" data-question="2">
<td>2</td>
<td class="question-response-rows-value">-</td>
</tr>
</table>
<div class="col-xs-12">
<a href="javascript:void(0)" class="btn btn-success" id="quick-access-prev">< Back</a>
<span class="alert alert-info" id="quick-access-info"></span>
<a href="javascript:void(0)" class="btn btn-success" id="quick-access-next">Next ></a>
</div>
</div>
빠른 액세스의 주요 항목은 다음과 같습니다.
a) #div 래퍼의 빠른 액세스 섹션. b). 질문-응답-이 클래스는 빠른 액세스로 모든 행에 필요한이 클래스가 필요하며, 데이터 질문도 필요합니다. 질문 번호가 있습니다.
c). Question-response-rows-value이 클래스는 각 질문에 대한 값을 가지며, 선택이 없을 때 "-"는 "-"입니다.
d). Quick-Access-Prev는 우리가 행을 groubing하는 경우 (스크린 샷과 같은) 복귀 작업을 수행하는 빠른 액세스 클래스입니다.
e). Quick-Access-next는 우리가 행을 그루 싱 (스크린 샷)에 따라 다음 행동을 수행하기위한 빠른 액세스 클래스입니다.
f) #Quick-Access-INFO이 선택기는 총 1/2와 같은 빠른 액세스 페이지 수에 대한 정보를 가지고 있습니다 (스크린 샷보기).
그리고 지금, QuickAccess를위한 완전한 구성을 보자
var examWizard = $.fn.examWizard({
quickAccessOption: {
enableAccessSection: true,// Enable or disable Quick Access
quickAccessPagerItem: 'Full',// Number of rows in quick access, by default is full and you can send your number like 9
quickAccessInfoSeperator:'/',// the sperator for quick access information the default is /. (1/2)
quickAccessDefaultRowVal:'-', // Default Row Value when value is empty
quickAccessRowValSeparator: ', ', // Default Value Sperator for multible value
nextCallBack :function(){}, // CallBack Function when click on next quick access callBack
prevCallBack :function(){}, // CallBack Function when click on prev quick access callBack
}
});
빠른 액세스에 표시된 링크를 표시하는 데 사용되는 버튼, 사용자가 업데이트하거나 답변을 좋아하는 경우 질문을 되 찾을 수있는 쉬운 방법입니다.
<!-- Mark Button Template -->
<div class="mark-unmark-wrapper" data-question="1">
<a href="javascript:void(0);" class="mark-question btn btn-success" data-question="1">
<b>MARK</b>
</a>
<a href="javascript:void(0);" class="hidden unmark-question btn btn-success" data-question="1">
<b>UNMARK</b>
</a>
</div>
<div class="mark-unmark-wrapper hidden" data-question="2">
<a href="javascript:void(0);" class="mark-question btn btn-success" data-question="2">
<b>MARK</b>
</a>
<a href="javascript:void(0);" class="hidden unmark-question btn btn-success" data-question="2">
<b>UNMARK</b>
</a>
</div>
a). 마크-마크 래퍼는 Mark/Unmark 버튼의 기본 선택기 래퍼이며, 데이터 질문에는 질문 번호가 있습니다 (다른 래퍼는 Contaion Hidden 클래스).
b). 마크 질문은 트리거 마크 조치를위한 선택기이며, 데이터 질문에는 질문 번호가 있습니다.
c). 마크 질문은 트리거 불완전한 조치를위한 선택기이며, 데이터 질문에는 질문 번호가 있습니다. (기본적으로 의지는 숨겨진 클래스가 있습니다).
그리고 이것은 JS 옵션입니다.
var examWizard = $.fn.examWizard({
markOption: {
markedLabel: 'Marked',// This is Link lable will be display on quick access (look to screen shot).
enableMarked: true,// Enalbe or Disable mark button, by default its enable
markCallBack: function(){},// CallBack Function when click on mark button
unMarkCallBack: function(){},// CallBack Function when click on unmark button
},
});
<!-- Html Button Template -->
<div class="">
<a href="javascript:void(0);" id="back-to-prev-question" class="btn btn-success disabled">
Back
</a>
</div>
<div class="">
----
<span id="current-question-number-label">1</span>
----
</div>
<div class="">
<a href="javascript:void(0);" id="go-to-next-question" class="btn btn-success">
Next
</a>
</div>
a) #Prev-Prev-Question 선택기는 이전 질문으로 돌아갑니다
b) #다음 질문에 도달하기 위해 텍스트로 이동합니다
c) #current-question-number-label 업데이트 된 질문 번호 사용자가 다음, 뒤로 또는 표시된 링크를 클릭하면 (다른 방법으로는 현재 질문 번호를 표시).
이제 JS 옵션을 볼 수 있습니다.
var examWizard = $.fn.examWizard({
nextOption: {
allowadNext: true, // Direct conf to enable or disable next button
callBack: function(){}, // Callback function trigger after next action done
breakNext: function(){return false;}, // Pre execute function to execute code and return bool to break next or no. (by default its return false thats mean next action will not break);
},
prevOption: {
allowadPrev: true,// Direct conf to enable or disable prev button
allowadPrevOnQNum: 2,// This option give Ability to set when Prev button will be enabled.(by default will be enable on question 2).
callBack: function(){},// Callback function trigger after prev action done
breakPrev: function(){return false;},// Pre execute function to execute code and return bool to break prev action or no. (by default its return false thats mean prev action will not break);
},
});
<!-- Finish Button Template -->
<div class="">
<a href="javascript:void(0);" id="finishExams" class="btn btn-success disabled">
<b>Finish</b>
</a>
</div>
<!-- If You enable modal -->
<div class="modal fade" id="finishExamsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div>
<span>Total Of Answerd Quastion</span>
<span class="finishExams-total-answerd"></span>
</div>
<div>
<span>Total Of Marked Quastion</span>
<span class="finishExams-total-marked"></span>
</div>
<div>
<span>Total Of Remaining Quastion</span>
<span class="finishExams-total-remaining"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
a) #finishexams 기본 선택기를 마무리 시험을 시작합니다.
b) 시험 종료 전에 FINSIH 조치를 방지하려면 버튼에 장애인 클래스를 추가해야합니다.
c) 마감 버튼을 클릭 할 때 모달을 활성화하면 모달을 위해 #finishexamsmodal을 설정해야하며 .finishexams-total-answerd, .finishexams-total-marked, .finishexams-total-remaining을 추가하여 결과의 여름을 표시 할 수도 있습니다. .
JS 구성을 보자 :
var examWizard = $.fn.examWizard({
finishOption: {
enableAndDisableFinshBtn:true, // Direct variable to enable or disable finsih button, by defaults its enable
enableFinishButtonAtQNum:'onLastQuestion', // By default finsih button will be enable when user on last question
enableModal: false, // This bool to trigger modal when click on finish button.
callBack: function(){} // Call Back function will be trigger after click on finish button
},
});
사용자가 페이지 또는 기타 케이스를 새로 고침 할 때 사용자 답변을 저장하려면 쿠키를 사용할 수 있으며 쿠키를 사용하도록 구성됩니다.
var examWizard = $.fn.examWizard({
cookiesOption: {
enableCookie: false,// For enable or disable cookie, by default is disabled
cookieKey: '',// Cookie Key is usefal if your exam may be run from many users in the same device or if one user has the many exams or both cases.
expires: 1*24*60*60*1000 // cookies expire data, by default its 1 day
}
});
var examWizard = $.fn.examWizard({
--------
});
// Returned All marked question
var values = examWizard.getMarkedQuestion();
// Return All Answerd/form data, groupingData used to collect data as object or arrays, fieldWithAlternateNameOnly to get only question value...both option by default is true.
var values = examWizard.getAnswerdValue(groupingData = true, fieldWithAlternateNameOnly = true);
// Return Total of Answerd Question
var values = examWizard.getTotalOfAnswerdValue();
// Return total of marked values
var values = examWizard.getTotalOfMarkedValue();
// Return Total Of Remaining Question
var values = examWizard.getTotalOfRemainingValue();
// Return current question number
var values = examWizard.getCurrentQuestionNumber();
// Return All Form Data
var values = examWizard.getAllFormData();
<!-- Html Template -->
<form id="examwizard-question"><!-- examwizard-question #id selector for exam form(you can update it by option -->
<div class="yourClass" data-question="1">
------
<input type="radio" data-alternatetype="radio" name="fieldName[0]" data-alternateName="answer[0]" data-alternateValue="A" value="1"/>
------
</div>
<div class="yourClass hidden" data-question="2"><!-- We Add hidden class here -->
------
<input type="radio" data-alternatetype="radio" name="fieldName[1]" data-alternateName="answer[1]" data-alternateValue="A" value="1"/>
------
</div>
<!-- Hidden field, save current question number, marked values, total of question -->
<input type="hidden" value="1" id="currentQuestionNumber" name="currentQuestionNumber" />
<input type="hidden" value="18" id="totalOfQuestion" name="totalOfQuestion" />
<input type="hidden" value="[]" id="markedQuestion" name="markedQuestions" />
</form>
<!-- Quick Access Html Template -->
<div class="col-xs-3" id="quick-access-section">
<table> <!-- You can use table, or any other html tag like div, spans..etc -->
<tr class="question-response-rows" data-question="1">
<td>1</td>
<td class="question-response-rows-value">-</td>
</tr>
<tr class="question-response-rows" data-question="2">
<td>2</td>
<td class="question-response-rows-value">-</td>
</tr>
</table>
<div class="col-xs-12">
<a href="javascript:void(0)" class="btn btn-success" id="quick-access-prev">< Back</a>
<span class="alert alert-info" id="quick-access-info"></span>
<a href="javascript:void(0)" class="btn btn-success" id="quick-access-next">Next ></a>
</div>
</div>
<div class="mark-unmark-wrapper" data-question="1">
<a href="javascript:void(0);" class="mark-question btn btn-success" data-question="1">
<b>MARK</b>
</a>
<a href="javascript:void(0);" class="hidden unmark-question btn btn-success" data-question="1">
<b>UNMARK</b>
</a>
</div>
<div class="mark-unmark-wrapper hidden" data-question="2">
<a href="javascript:void(0);" class="mark-question btn btn-success" data-question="2">
<b>MARK</b>
</a>
<a href="javascript:void(0);" class="hidden unmark-question btn btn-success" data-question="2">
<b>UNMARK</b>
</a>
</div>
<!-- Html Button Template -->
<div class="">
<a href="javascript:void(0);" id="back-to-prev-question" class="btn btn-success disabled">
Back
</a>
</div>
<div class="">
----
<span id="current-question-number-label">1</span>
----
</div>
<div class="">
<a href="javascript:void(0);" id="go-to-next-question" class="btn btn-success">
Next
</a>
</div>
<!-- Finish Button Template -->
<div class="">
<a href="javascript:void(0);" id="finishExams" class="btn btn-success disabled">
<b>Finish</b>
</a>
</div>
<!-- Scripts -->
<script src="js/jquery.js"></script><!-- Required -->
<script src="js/examwizard.min.js"></script><!-- Required -->
<script>
var examWizard = $.fn.examWizard({
// Your Configration
});
</script>
<script>
var examWizard = $.fn.examWizard({
currentQuestionSelector:'#currentQuestionNumber',
totalOfQuestionSelector:'#totalOfQuestion',
formSelector: '#examwizard-question',
currentQuestionLabel: '#current-question-number-label',
alternateNameAttr: 'data-alternateName',
alternateValueAttr: 'data-alternateValue',
alternateTypeAttr: 'data-alternateType',
quickAccessOption: {
quickAccessSection: '#quick-access-section',
enableAccessSection: true,
quickAccessPagerItem: 'Full',
quickAccessInfoSelector:'#quick-access-info',
quickAccessPrevSelector:'#quick-access-prev',
quickAccessNextSelector:'#quick-access-next',
quickAccessInfoSeperator:'/',
quickAccessRow: '.question-response-rows',
quickAccessRowValue: '.question-response-rows-value',
quickAccessDefaultRowVal:'-',
quickAccessRowValSeparator: ', ',
nextCallBack :function(){},
prevCallBack :function(){},
},
nextOption: {
nextSelector: '#go-to-next-question',
allowadNext: true,
callBack: function(){},
breakNext: function(){return false;},
},
prevOption: {
prevSelector: '#back-to-prev-question',
allowadPrev: true,
allowadPrevOnQNum: 2,
callBack: function(){},
breakPrev: function(){return false;},
},
finishOption: {
enableAndDisableFinshBtn:true,
enableFinishButtonAtQNum:'onLastQuestion',
finishBtnSelector: '#finishExams',
enableModal: false,
finishModalTarget: '#finishExamsModal',
finishModalAnswerd: '.finishExams-total-answerd',
finishModalMarked: '.finishExams-total-marked',
finishModalRemaining: '.finishExams-total-remaining',
callBack: function(){}
},
markOption: {
markSelector: '.mark-question',
unmarkSelector: '.unmark-question',
markedLinkSelector: '.marked-link',
markedQuestionsSelector:'#markedQuestion',
markedLabel: 'Marked',
markUnmarkWrapper: '.mark-unmark-wrapper',
enableMarked: true,
markCallBack: function(){},
unMarkCallBack: function(){},
},
cookiesOption: {
enableCookie: false,
cookieKey: '',
expires: 1*24*60*60*1000 // 1 day
}
});
</script>
일반적으로 모든 현대식 브라우저에서 작동합니다. 테스트 (Chrome, Firefox, Microsoft Edge, Safari).
구식 브라우저 및 인터넷 탐험가를 지원하지 않습니다.
