exam wizard
1.0.0
Plug -in JQuery do assistente de exame para lidar com exames, perguntas, respostas facilmente, é útil para criar exames, pesquisas, questionadores
A maneira preferida de instalar esta extensão é através do compositor.
Correr
php composer.phar require --prefer-dist aneeshikmat/exam-wizard "*@dev"
Para usar este plugin, você precisa escrever seu código como este modelo (em uso básico):
<!-- 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>
Como você vê, é muito simples e agora explicaremos esse código e, em seguida, iremos exibir todas as opções pode ser usada para nos ajudar.
<script>
var examWizard = $.fn.examWizard({
formSelector: "#new-examwizard-question",
});
</script>
Invólucro
Campo de perguntas que a maioria é escrever com esta regra:
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 Field é um campo oculto, exceto o número da pergunta atual, o valor init = 1.
O campo #TotalOfQuestion é um campo oculto, exceto o número total do número da pergunta, seu mais definido para ser uma pergunta groubing. (Neste exemplo, temos uma pergunta de 18, para que o exame de exame lida apenas com 18 perguntas.
O campo #MarkedQuestion é um campo oculto, exceto todo o valor marcado, o valor padrão é a matriz vazia "[]". (Se você desativou a opção Marks, você não precisa deste campo).
Seção de acesso rápido É um layout simples útil para exibir respostas de entrada por usuários e links marcados, esta opção é ativada por padrão.
<!-- 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>
O item principal em acesso rápido é:
A) #seção de acesso rápido no invólucro de divisão. B). Pergunta-resposta-resposta Esta classe necessária em todas as linhas em acesso rápido, e também é necessária uma pergunta de dados, seu número de perguntas.
C) .Tor-resposta-resposta.
D). Quick-access-prev é a classe de acesso rápido para fazer a ação de volta se as linhas groubing (como a tiro de tela)
E). Quick-ACCESS-NEXT é a aula de acesso rápido para fazer a próxima ação se robagens de linhas (como tiro de tela)
F) #Acesso rápido-Info Este seletor terá uma informação sobre o número de página de acesso rápido do total como 1/2 (veja a captura de tela).
E agora, vamos ver a Configração completa do 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
}
});
É um botão usado para exibir o link marcado no acesso rápido, sua maneira fácil de permitir que o usuário volte a questionar se ele gosta de atualizar ou responder.
<!-- 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 é o principal invólucro seletor para o botão Mark/Unmark, a pergunta de dados tem um número de perguntas. (Outro invólucro contornará a classe oculta).
B). Mark-question é o seletor para a ação da marca de gatilho, a pergunta de dados tem um número de perguntas.
C) .UnMark-perguntas é o seletor para acionar ações não marcadas, a pergunta de dados tem um número de perguntas. (Por padrão, Will tem classe oculta).
E esta é a opção 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) #seletor de volta a previstão para a pergunta de volta à prel
B) #seletor de busca vantagem para chegar à próxima pergunta
C) #Número da pergunta atualizada da pergunta atual-QUALTION-PESSÃO quando o usuário clica em Avançar, traseiro ou link marcado (de outra maneira, exibe um número de pergunta atual).
E agora vamos ver a opção 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 O seletor padrão para acionar o exame de acabamento.
b) Você precisa adicionar a classe desativada para o botão, se desejar evitar uma ação FINSIH antes do final do exame.
c) Se você habilitar modal ao clicar no botão Concluir, precisar .
Vamos ver nossa Configração 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
},
});
Para salvar os usuários, respondendo quando ele atualizará a página ou qualquer outro caso, você pode usar cookies, e isso é configração para usar cookies
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>
Em geral, seu trabalho em todo o navegador moderno. Testado em (Chrome, Firefox, Microsoft Edge, Safari).
E não é suporte para a versão antiga do navegador e da Internet Exploler.
