'How to enter name form user with window.onload in if/else condition and print jsPDF certificate
Here is all the functions.Is a quiz that gives you certificate if you take over 80.
(function($) { $.fn.emc = function(options) {
var defaults = {
key: [],
scoring: "normal",
progress: true
},
settings = $.extend(defaults,options),
$quizItems = $('[data-quiz-item]'),
$choices = $('[data-choices]'),
itemCount = $quizItems.length,
chosen = [],
$option = null,
$label = null;
emcInit();
if (settings.progress) {
var $bar = $('#emc-progress'),
$inner = $('<div id="emc-progress_inner"></div>'),
$perc = $('<span id="emc-progress_ind">0/'+itemCount+'</span>');
$bar.append($inner).prepend($perc);
}
function emcInit() {
$quizItems.each( function(index,value) {
var $this = $(this),
$choiceEl = $this.find('.choices'),
choices = $choiceEl.data('choices');
for (var i = 0; i < choices.length; i++) {
$option = $('<input name="'+index+'" id="'+index+'_'+i+'"
type="radio">');
$label = $('<label for="'+index+'_'+i+'">'+choices[i]+'</label>');
$choiceEl.append($option).append($label);
$option.on( 'change', function() {
return getChosen();
});
}
});
}
Choose answer function.You have to answer all questions to submit
function getChosen() {
chosen = [];
$choices.each( function() {
var $inputs = $(this).find('input[type="radio"]');
$inputs.each( function(index,value) {
if($(this).is(':checked')) {
chosen.push(index + 1);
}
});
});
getProgress();
}
Progress bar function
function getProgress() {
var prog = (chosen.length / itemCount) * 100 + "%",
$submit = $('#emc-submit');
if (settings.progress) {
$perc.text(chosen.length+'/'+itemCount);
$inner.css({height: prog});
}
if (chosen.length === itemCount) {
$submit.addClass('ready-show');
$submit.click( function(){
return scoreNormal();
});
}
}
Calculate score function.if score ocer 80 a button Print me appear and i dont know how to put id in this and use it to print jsPDF.
function scoreNormal() {
var wrong = [],
score = null,
$scoreEl = $('#emc-score');
for (var i = 0; i < itemCount; i++) {
if (chosen[i] != settings.key[i]) {
wrong.push(i);
}
}
$quizItems.each( function(index) {
var $this = $(this);
if ($.inArray(index, wrong) !== -1 ) {
$this.removeClass('item-correct').addClass('item-incorrect');
} else {
$this.removeClass('item-incorrect').addClass('item-correct');
}
});
var score_num = ((itemCount - wrong.length) / itemCount).toFixed(2) * 100;
score = ((itemCount - wrong.length) / itemCount).toFixed(2) * 100 + "%";
if( score_num >= 80){
$scoreEl.html("<h5>You did Excellent! You scored "+score+" </h5><img
src=\"./logos/star.png\" style='max-width: 35px;'> <h5 >(Gold)</h5> <button
onclick=jsPDF(); >Print Me!</button>" ).addClass('new-score');
}else if(score_num <= 80 && score_num >= 40){
$scoreEl.html("<h5>You did Good! You scored "+score+" </h5><img
src=\"./logos/star2.png\" style='max-width: 35px;'> <h5>(Silver)
</h5>").addClass('new-score');
}else{
$scoreEl.html("<h5>You could have done better! You scored "+score+" </h5>
<img src=\"./logos/star3.png\" style='max-width: 35px;'> <h5>(Bronze)
</h5>").addClass('new-score-bad');
}
$('html,body').animate({scrollTop: 0}, 50);
}
window.onload=function(){
var el=document.getElementById('my_text');
el.onclick=function(){
var my_text=prompt('Enter Full Name here');
// if(my_text) alert(my_text);
var doc = new jsPDF();
doc.setTextColor(0,0,255);
doc.setFontSize(10);
var image="data:image/png;base64,
***
var width = doc.internal.pageSize.getWidth()
// doc.text('Centered text', width/2, 20, { align: 'center' })
doc.text('BABBAT', width/2, 20, { align: 'center' })
doc.text('Strategic Partnership for Adult Education', width/2, 30, { align:
'center' })
doc.text('Project Reference: E1AB544D-2019-1-IS01-KA204-051131', width/2, 40,
{ align: 'center' })
doc.text('Certificate of Participation', width/2, 50, { align: 'center' })
doc.text('This certifies that', width/2, 60, { align: 'center' })
doc.text(my_text, width/2, 70, { align: 'center' })
doc.setTextColor(0,0,0);
doc.text('text', width/2, 110, {maxWidth: 90},{ align: 'center'})
doc.text('Text', width/2, 193, {maxWidth: 70},{ align: 'center' })
doc.addImage(image1, 'PNG', 20, 90, 50, 50);
doc.addImage(image2, 'PNG', 30, 170, 60, 60);
doc.addImage(image, 'PNG', 10, 10, 40, 40);
doc.save('Certificate.pdf');
}
};
}
}(jQuery));
$(document).emc({
key: ["1","1","1","1","1","1","2","1","1","1","1","2"]
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
