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 ฟิลด์เป็นฟิลด์ที่ซ่อนอยู่บันทึกหมายเลขคำถามปัจจุบันค่าเริ่มต้น = 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) #การเข้าถึงอย่างรวดเร็วใน wrapper div b). การตอบสนองต่อแถวที่ต้องการในทุก ๆ แถวในการเข้าถึงอย่างรวดเร็วและต้องมีคำถามเกี่ยวกับข้อมูลเช่นกันมันมีหมายเลขคำถาม
C). คำถาม-ตอบสนอง-แถว-ค่าคลาสนี้มีค่าสำหรับแต่ละคำถามค่า defualt เมื่อไม่มีอะไรเลือกคือ "-"
D) .QUICK-ACCESS-PREV เป็นคลาสการเข้าถึงที่รวดเร็วในการดำเนินการย้อนกลับถ้าเราเป็นแถวที่น่าเบื่อ (เช่นช็อตหน้าจอ)
e) .QUICK-ACCESS-NEXT เป็นคลาสการเข้าถึงที่รวดเร็วในการดำเนินการต่อไปหากเราเป็นแถวที่เป็นแถว (เช่น SCREEL SHOT)
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-wrapper เป็นตัวเลือกหลักสำหรับปุ่ม Mark/Unmark, คำถามข้อมูลมีหมายเลขคำถาม (wrapper อื่น ๆ จะเชื่อมต่อคลาสที่ซ่อนอยู่)
b). mark-question เป็นตัวเลือกสำหรับการกระทำของทริกเกอร์เครื่องหมายคำถามมีหมายเลขคำถาม
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) #ตัวเลือก back-to-prev-question เพื่อกลับไปที่คำถามก่อนหน้า
b) #ตัวเลือกคำถามไปยัง Next-question เพื่อไปยังคำถามถัดไป
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) หากคุณเปิดใช้งาน Modal เมื่อคลิกที่ปุ่ม Finish คุณจะต้องตั้งค่า #finishexamsmodal สำหรับ Modal นอกจากนี้คุณสามารถแสดงผลการแข่งขันในช่วงฤดูร้อนโดยการเพิ่ม. finishexams-total-Answerd .
ให้เราดูการกำหนดค่า 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)
และไม่รองรับเบราว์เซอร์และ Internet Exploler เวอร์ชันเก่า
