1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.
319.
320.
321.
322.
323.
324.
325.
326.
327.
328.
329.
330.
331.
332.
333.
334.
335.
336.
337.
338.
339.
340.
341.
342.
343.
344.
345.
346.
347.
348.
349.
350.
351.
352.
353.
354.
355.
356.
357.
358.
359.
360.
361.
362.
363.
364.
365.
366.
367.
368.
369.
370.
371.
372.
373.
374.
375.
376.
377.
378.
379.
380.
381.
382.
383.
384.
385.
386.
387.
388.
389.
390.
391.
392.
393.
394.
395.
396.
397.
398.
399.
400.
401.
402.
403.
404.
405.
406.
407.
408.
409.
410.
411.
412.
413.
414.
415.
416.
417.
418.
419.
420.
421.
422.
423.
424.
425.
426.
427.
428.
429.
430.
431.
432.
433.
434.
435.
436.
437.
438.
439.
440.
441.
442.
443.
444.
445.
446.
447.
448.
449.
450.
451.
452.
453.
454.
455.
456.
457.
458.
459.
460.
461.
462.
463.
464.
465.
466.
467.
468.
469.
470.
471.
472.
473.
474.
475.
476.
477.
478.
479.
480.
481.
482.
483.
484.
485.
486.
487.
488.
489.
490.
491.
492.
493.
494.
495.
496.
497.
498.
499.
500.
501.
502.
503.
504.
505.
506.
507.
508.
509.
510.
511.
512.
513.
514.
515.
516.
517.
518.
519.
520.
521.
522.
523.
524.
525.
526.
527.
528.
529.
530.
531.
532.
533.
534.
535.
536.
537.
538.
539.
540.
541.
542.
543.
544.
545.
546.
547.
548.
549.
550.
551.
552.
553.
554.
555.
556.
557.
558.
559.
560.
561.
562.
563.
564.
565.
566.
567.
568.
569.
570.
571.
572.
573.
574.
575.
576.
577.
578.
579.
580.
581.
582.
583.
584.
585.
586.
587.
588.
589.
590.
591.
592.
593.
594.
595.
596.
597.
598.
599.
600.
601.
602.
603.
604.
605.
606.
607.
608.
609.
610.
611.
612.
613.
614.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<style type="text/css">
.main-quiz-holder {
text-align: center;
}
.main-quiz-holder .slide-container ul.answers {
margin: 0px;
list-style: none;
}
.main-quiz-holder .slide-container ul.answers li {
cursor: pointer;
padding: 6px 30px;
margin: 10px 0;
display: block;
text-align: left;
}
.question {
display: none;
}
.main-quiz-holder {
margin: 0px auto;
padding: 20px 0px;
/*position: relative;
background: #FCFCFC;*/
border: 1px solid #dedede;
/*box-shadow: 0 1px 5px #D9D9D9,inset 0 10px 20px #F1F1F1;
border-radius: 10px 10px 10px 10px;*/
width: 600px;
}
.main-quiz-holder .slide-container {
margin: 0px auto;
width: 500px;
}
.main-quiz-holder .question {
padding-left: 5px;
line-height: 1.3em;
}
.main-quiz-holder .notice {
display: none;
text-align: center;
margin: 0px 0px 15px 0px;
}
.main-quiz-holder .notice2 {
display: none;
text-align: center;
margin: 0px 0px 15px 0px;
}
.nav-container {
margin: 15px 0px;
}
.progress {
margin: 0px auto;
width: 500px;
height: 25px;
}
.nav-container button.btn-success {
float: right;
}
.results button.btn-success, .results button.btn-danger {
margin: 3px;
}
.results * {
margin: 0px auto;
}
.progress {
display: none;
}
</style>
<script type="text/javascript">
var questions = [
{
type: "text",
question: "<h3>Новый вопрос</h3><pre><?php
$string = \'PHP\';
if (print \'PHP\' == (100-99)) {
echo \'B\';
} else if (print \'PHP\' == $string) {
echo \'A\';
} else {
echo \'C\';
}</pre>",
answers: [
"Новый"
],
correct: [1]
},
{
type: "choose",
question: "<h3>PHP (от англ. _______________) это _________ язык программирования, основанный на технологии _________.</h3>",
answers: [
"\"PHP: Hypertext Preprocessor\", \"скриптовый язык\", \"Zend\"",
"\"PHP: Hypertext Preprocessor\", \"скриптовый язык\", \"PHP\"",
"\"PHP: Hypertext Preprocessor\", \"функциональный язык\", \"Zend\"",
"\"PHP: Hypertext Preprocessor\", \"функциональный язык\", \"PHP\"",
"\"Personal Hypertext Processor\", \"скриптовый язык\", \"Zend\"",
"\"Personal Hypertext Processor\", \"скриптовый язык\", \"PHP\"",
"\"Personal Hypertext Processor\", \"функциональный язык\", \"Zend\"",
"\"Personal Hypertext Processor\", \"функциональный язык\", \"PHP\""
],
correct: [1]
},
{
type: "choose",
question: "<h3>Что будет выведено на экран в результате выполнения следующего кода?</h3><pre><html><br/><head><br/> <title></title><br/></head><br/><body><br/> <script language=\"php\"><br/> echo 'Какой-то текст';<br/> </script><br/></body><br/></html><br/></pre>",
answers: [
"echo 'Какой-то текст';",
"Какой-то текст",
"Ничего не выведется",
"Возникнет ошибка"
],
correct: [2]
},
{
type: "choose",
question: "<h3>Какие из перечисленных тегов непригодны для открытия и закрытия PHP блока?</h3>",
answers: [
"<% %>",
"<? ?>",
"<?= ?>",
"<! !>",
"<?php ?>"
],
correct: [4]
},
{
type: "choose",
question: "<h3>Почему в PHP файлах не рекомендуется ставить \"?>\" закрывающийся тег?</h3>",
answers: [
"Это предотвращает появление лишних случайных символов",
"Подобная рекомендация улучшает читабельность",
"Это важный аспект безопасности",
"Не рекомендуется? Не, это не правда"
],
correct: [1]
},
{
type: "choose",
question: "<h3>Что будет выведено в результате выполнения следующего кода?</h3><pre><?php
$a = 11;
$b = 22;
$c = 33;
echo $b = $a = $c
?></pre>",
answers: [
"33", "22", "11", "0", "22 = 11 = 33", "Возникнет \"Parse error\""
],
correct: [1]
},
{
type: "choose",
question: "<h3>Что будет выведено в результате выполнения следующего кода?</h3><pre><?php
echo \'A\';
if (\'A\' != \'B\')
echo \"B\"
# C ?> D</pre>",
answers: [
"AB D", "ABCD", "ABC D", "AC D", "Возникнет ошибка"
],
correct: [1]
},
{
type: "choose",
question: "<h3>Что будет выведено в результате выполнения следующего кода?</h3><pre><?php
$fruits = array(\'apple\', 0, \'banana\', 1, \'orange\');
for each ($fruits as $fruit) {
echo $fruit;
}</pre>",
answers: [
"apple0banana1orange", "applebananaorange", "apple banana orange", "apple0 banana1 orange", "apple 0 banana 1 orange", "возникнет ошибка"
],
correct: [6]
},
{
type: "choose",
question: "<h3>Что будет выведено в результате выполнения следующего кода?</h3><pre><?php
echo \'Hello\';
if (false)
echo \"PHP \"; echo \" Certification\";
echo \"!!!\";</pre>",
answers: [
"Hello Certification!!!", "Возникнет ошибка", "Hello PHP Certification!!!", "Hello PHP Certification!!!", "HelloPHP Certification!!!", "Hello Certification!!!"
],
correct: [1]
},
{
type: "choose",
question: "<h3>В чём разница между echo и print?</h3>",
answers: [
"print можно использовать как часть выражения, а echo нет", "echo можно использовать как часть выражения, а print нет", "Между этими функциями нет никакой разницы"
],
correct: [1]
},
{
type: "choose",
question: "<h3>Что будет выведено в результате выполнения следующего кода?</h3><pre><?php
$string = \'PHP\';
if (print \'PHP\' == (100-99)) {
echo \'B\';
} else if (print \'PHP\' == $string) {
echo \'A\';
} else {
echo \'C\';
}</pre>",
answers: [
"A", "B", "C", "Возникнет ошибка"
],
correct: [2]
}
];
$("document").ready(function(){
$("#quizler").jQuizler(questions);
});
(function($){
$.fn.extend({
jQuizler: function(questions) {
// @todo избавиться от возможности двойного клика по кнопкам "cследующий", "предыдущий", "результат"
// @todo добавить возможность выбора нескольких вариантов ответа
// @todo добавить возможность внедрения названия теста на страницу результатов
// @todo избавиться от зависимости Bootsrap CSS
// @todo поработать над стилем элементов кнопок и прогресса
// @todo добавить кнопки "поделиться" или "like" для разных соц сетей ("ВКонтакте", "Однолкассники", ...)
// @todo разобраться с проблемой клика по элементу кнопки на странице результатов
// @todo переписать код, сделать его более изящным и чистым
// @todo сделать так, чтобы плагин можно было применять для 2х и более тестов на страницу
// @todo создать online инструмент для формирования и редактирования вопросов
if (questions == null)
throw 'No questions was provided.';
var reviewQuiz = false;
var percentage = 0;
var percentPiece = 100 / questions.length;
var rightAnswers = 0;
$(this).html("<div class=\"intro\">" + $(this).html() + "</div>");
$(this).click(function(){
$(this).off('click');
$(".intro").hide();
$(this).css("text-align", "left");
$('.progress').css("display", "block");
var question = $("#question-1");
question.css({opacity : '0', height : '0px'});
question.animate({
opacity : '1',
height : '100%'
}, 500, function(e){});
question.css('display', 'block');
percentage += percentPiece;
$(".progress div").css("width", percentage + "%");
});
(function($){
$.shuffle = function(arr) {
for(
var j, x, i = arr.length; i;
j = parseInt(Math.random() * i),
x = arr[--i], arr[i] = arr[j], arr[j] = x
);
return arr;
}
})(jQuery);
String.prototype.replaceAll = function (find, replace) {
var str = this;
return str.replace(new RegExp(find, 'g'), replace);
};
return this.each(function(){
var html = "";
html += "<div class=\"results slide-container question\" style=\"display:none\"></div>";
$.each(questions, function(index, question){
html += "<div id=\"question-" + (index + 1) + "\" class=\"slide-container question\">";
//html += "<div class=\"question-number\">Вопрос " + (index + 1) + ' из ' + questions.length + "</div><div style=\"margin:0px; clear:both\"></div>";
html += question.question;
var correctAnswers = [];
for (var i = 0; i < question.correct.length; i++)
correctAnswers.push(question.answers[question.correct[i] - 1]);
question.answers = $.shuffle(question.answers);
var correctAnswersNewIndexes = [];
for (var i = 0; i < question.correct.length; i++)
correctAnswersNewIndexes.push(question.answers.indexOf(correctAnswers[i]));
if(question.type != "text")
question.correct = correctAnswersNewIndexes;
/*for (var i = 0; i < question.correct.length; i++)
console.log(question.answers[correctAnswersNewIndexes[i]]);*/
html += "<ul class=\"answers\">";
for (var i = 0; i < question.answers.length; i++)
{
switch(question.type) {
case "text":
html += " <input class=\"input-block-level\" type=\"text\" size=\"100\" id=\"otvet\">";
question.answers[i] = $("input").val();
html += "<li class=\"btn-info\" hidden>" + question.answers[i] + "</li>";
break;
case "choose":
html += "<li class=\"btn\">" + question.answers[i] + "</li>";
break;
default:
html += "<li class=\"btn\">" + question.answers[i] + "</li>";
break;
}
}
html += "</ul>";
html += "<div class=\"nav-container\">";
html += "<div class=\"notice alert alert-info\">Выберите ответ</div>";
if (index != 0) {
html += "<button class=\"prev btn btn-info\"><i class='icon-arrow-left icon-white'></i> Предыдущий</button>";
}
if (index != questions.length-1) {
html += "<button class=\"next btn btn-success\">Следующий <i class='icon-arrow-right icon-white'></i></button>";
html += "<div style=\"clear:both\"></div>";
} else {
html += "<button class=\"final btn btn-success\">Результат <i class='icon-ok icon-white'></i></button>";
html += "<div style=\"clear:both\"></div>";
}
html += "</div></div>";
html += "</div>";
});
html += "<div class=\"progress progress-info progress-striped\">";
html += "<div id=\"percent\" class=\"bar\" style=\"width: 0%;\"></div>";
html += "</div>";
///html += "<div style=\"margin:0px; clear:both\"></div>";
$(this).append(html);
$("div[id*='question-'] li").click(function(){
if (!reviewQuiz) {
/*$(this).siblings().removeClass("selected");
$(this).toggleClass("selected");*/
$(this).siblings().removeClass("btn-info");
$(this).toggleClass("btn-info");
}
});
$(".final").click(function(e){
var div = $(e.target).closest("div[id*='question-']");
var userAnswer = div.find("li.btn-info");
if (userAnswer.index() == -1 && !reviewQuiz) {
var notice = div.find(".notice");
notice.css('opacity', '0');
notice.animate({
opacity: 1
}, 500, function(){});
div.find(".notice").css('display', 'block');
} else if (!reviewQuiz) {
div.find(".notice").css('display', 'none');
percentage += percentPiece;
if (percentage > 100) percentage = 100;
$("#percent").css("width", percentage + "%");
var resultHTML = "<h3 style=\"text-align: center\">РЕЗУЛЬТАТЫ</h3>";
var buttonsHTML = '';
$.each(questions, function(index, question){
//console.log("Правильные ответы: " + question.correct);
var element = $("#question-" + (index+1) + " ul li.btn-info");
//console.log("Ответ пользователя: " + element.index());
if (element.index() == question.correct) {
element.removeClass("btn-info");
element.addClass("btn-success");
buttonsHTML += "<button class=\"btn btn-success\"><i class='icon-ok-sign icon-white'></i> Вопрос " + (index+1) + "</button>";
rightAnswers++;
} else {
element.removeClass("btn-info");
element.addClass("btn-danger");
buttonsHTML += "<button class=\"btn btn-danger\"><i class='icon-remove-sign icon-white'></i> Вопрос " + (index+1) + "</button>";
for (var i=0; i<question.correct.length; i++) {
element.parent().find('li').eq(question.correct[i]).addClass("btn-success");
}
}
});
resultHTML += "<p style=\"margin: 14px 0px\">Вы ответили на " + Math.round(((rightAnswers * 100) / questions.length) * 100) / 100 + "% вопросов.</p>";
resultHTML += buttonsHTML;
resultHTML += "<p style=\"margin-top:25px; text-align: center\"><button class=\"btn btn-large tostart\">Просмотреть вопросы</button></p>";
div.animate({
opacity : '0'
}, 500, function(e){
div.css('display', 'none');
div.find(".notice").css('display', 'none');
$(".results").append(resultHTML);
$(".results").css("opacity", "0");
$(".results").css("display", "block");
$(".results").animate({
opacity : '1'
}, 500, function(e){
});
});
$(".progress").animate({
opacity : '0'
}, 100, function(e){});
reviewQuiz = true;
} else {
$(".results").animate({
opacity: "1",
display: "block"
}, 100, function(e){});
div.animate({
opacity : '0'
}, 500, function(e){
div.css('display', 'none');
div.find(".notice").css('display', 'none');
div.find(".notice2").css('display', 'none');
$(".results").append(resultHTML);
$(".results").css("opacity", "0");
$(".results").css("display", "block");
$(".results").animate({
opacity : '1'
}, 500, function(e){
});
});
$(".progress").animate({
opacity : '0'
}, 100, function(e){});
}
return false;
});
$(".next").click(function(e){
var div = $(e.target).closest("div[id*='question-']");
var userAnswer = div.find("li.btn-info");
if (userAnswer.index() == -1 && !reviewQuiz) {
var notice = div.find(".notice");
notice.css('opacity', '0');
notice.animate({
opacity: 1
}, 500, function(){});
div.find(".notice").css('display', 'block');
} else {
var nextId = parseInt(div.attr('id').replace('question-', '')) + 1;
//console.log(nextId);
var newQuestion = $("#question-" + nextId);
div.animate({
opacity : '0'
}, 500, function(e){
div.css('display', 'none');
div.find(".notice").css('display', 'none');
newQuestion.css({opacity : '0', height : '0px'});
newQuestion.animate({
opacity : '1',
height : '100%'
}, 500, function(e){});
newQuestion.css('display', 'block');
});
percentage += percentPiece;
$(".progress div").css("width", percentage + "%");
}
return false;
});
$(".prev").click(function(e){
var div = $(e.target).closest("div[id*='question-']");
var prevId = parseInt(div.attr('id').replace('question-', '')) - 1;
var newQuestion = $("#question-" + prevId);
div.animate({
opacity : '0'
}, 500, function(e){
div.css('display', 'none');
//div.find(".notice").css('display', 'none');
newQuestion.css({opacity : '0', height : '0px'});
newQuestion.animate({
opacity : '1',
height : '100%'
}, 500, function(e){});
newQuestion.css('display', 'block');
});
percentage -= percentPiece;
$(".progress div").css("width", percentage + "%");
return false;
});
$(".results").click(function(e){
$(".results").animate({opacity: 0}, 500, function(e){
$(".results").css("display", "none");
var question = $("#question-1");
question.css({opacity : '0', height : '0px'});
question.animate({
opacity : '1',
height : '100%'
}, 500, function(e){});
question.css('display', 'block');
$(".progress div").css("width", "0");
$(".progress div").css("display", "block");
$(".progress").animate({
opacity : '1'
}, 300, function(e){
percentage = 0;
percentage += percentPiece;
$(".progress div").css("width", percentage + "%");
});
});
});
});
}
});
})(jQuery);
</script>
</head>
<body>
<div id="quizler" class="main-quiz-holder">
<h3>Тест по основам PHP. Синтаксис</h3>
<button class="btn btn-large">Старт</button>
</div>
</body>
</html>
