exam wizard
1.0.0
考試對嚮導的插件，以處理考試，問題，答案，有助於建立考試，調查，提問者
安裝此擴展程序的首選方法是通過作曲家。
要么運行
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字段是一個隱藏的字段，保存了問題編號的總數，其設置最多的問題可能是問題。 （在此示例中，我們有一個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）。問題 - 響應 - 行值此類對每個問題都有一個值，當沒有選擇的是“ - ”時，defualt值。
d）.Quick-Access-prev是快速訪問類，如果我們的行（如屏幕截圖）
e）.quick-access-next是快速訪問類，如果我們抓緊行（如屏幕截圖）
f）＃Quick-Access-Info此選擇器將提供有關1/2（查看屏幕截圖）的快速訪問頁碼的信息。
現在，讓我們看到全面的興趣
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-wrapper是標記/unmark按鈕的主要選擇器包裝器，數據問題具有一個問題編號。
b）.mark問題是觸發標記操作的選擇器，數據問題具有一個問題編號。
c）.unmark問題是觸發Unmark操作的選擇器，數據問題具有一個問題編號。 （默認情況下，將具有隱藏的類）。
這是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）＃背靠背問題選擇器返回到上述問題
b）＃到達次要問題選擇器要解決下一個問題
c）＃當前問題 - 標籤標籤更新的問題編號當用戶單擊下一步，返回或標記鏈接時（另一種方式顯示當前問題編號）。
現在讓我們查看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-asswerd，.finishexams-total-total-total-marked顯示結果的夏季夏季。 。
讓我們看看我們的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
},
});
為了在用戶刷新頁面或任何其他情況下節省答案，您可以使用cookie，這是使用cookie的cookie
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）上進行了測試。
它不支持舊版本的瀏覽器和Internet Extloler。
