Зараз обговорюють

"Тобто є ряд завдань, які взагалі без рекурсії не наважуються."  - це як розуміти? Перефразуй, будь ласка. 

виправив, йшлося про те що деякі завдання можна вирішити лише при використанні рекурсії

Спасибі дуже корисна стаття

А ще щось планується подібного найближчим часом?


Дякую за підтримку, радий що Вам сподобалось!

Так маю вже майже дороблений проект по управлінні Audio файлом, на заміну стандартним клавішам управління HTML5, але ще не встиг відтестувати програвання файлів з інтернету, поки лише локально працює

Надіюсь найближчим часом дороблю й закину

Рахунки

webmoneyeur - E385818210641
usd - Z304643423050
uah - U354026817492
rub - R301704373231easypay80002677bitcoin1F5HRGroUtEQW9HBNbeew8iKh5KQ8vJxzw

Зворотній зв'язок

Для покращення роботи сайту надсилайте свої зауваження:
mailЗауваження
mailПропозиція

Статистика

UkrNET - поисково-информационный ресурс

JavaScript : Як створити власний тест

Недавно ми розбирали як зробити переглядач зображень, сьогодні ми створимо простий тест і в кінці статті буде Demo приклад.

І так, давайте з початку розберемо структуру нашого тесту, що буде складатись із:

- запитань

- варіантів відповіді

- № правильної відповіді

Для кожного запитання може бути лише одна правильна відповідь, яка буде перевірятись одразу при виборі одного із варіантів відповіді.

Кількість балів за тест буде = 100, кількість далі буде рівномірно розприділятись на кількість запитань у тесті.

Також додамо можливість не лінійного проходження тесту, щоб користувач міг переходити між тестами, та повернутись до них пізніше.

HTML

Наша стартова розмітка буде виглядати наступним чином:

<div id="testArea">
	<div class="testName">Тестовий тест ☺</div><hr>
	<div id="testNum"></div>
	<div id="currentTestView"></div>
	<div id="restResult"></div>
	<input type="button" id="startTests" value=">> Розпочати тест <<">
</div>

testArea - вміщає наш весь блок із тестами

testName - назва тесту в нас буде стандартна

testNum - тут буде навігація по запитаннях тесту

currentTestView - блок в який будемо виводити запитання з відповідями

restResult - будуть виводитись результати тесту

startTests - кнопка буде відповідати за початок/кінець тесту


JS

Інформацію про тест ми будемо опрацьовувати в масивах даних.

І нарешті перейдемо до самого коду виведення та перевірки тесту:

$(document).ready(function () {
	var start = 0; //змінна зберігає етап проходження тесту
	var questionArray = []; //масив запитань
	var answerArray = []; //масив варіантів відповіді
	var correctAnswerArray = []; //масив правильних відповідей ID
	var correctAnswerCount; //к-ть правильних відповідей користувача
	var userAnswerArray = []; //масив відповідей які зазначив користувач
	var chech = []; //масив класів для відображення правильної/неправильної відповіді
	var curTest; //змінна зберігає № поточного запитання
	var chechAnswer = ''; //змінна яка буде отримувати назву класу для відображення правильності вибору користувача
	$("#startTests").on('click', function(){ //виконати дії при натисканні на кнопку
		if(start == 0){ //виконати дії при натисканні на кнопку із текстом >> Розпочати тест <<
			correctAnswerCount = 0;
			chech = ['good', 'bad']; //назви класів для відображення правильно/неправильно зазначеної відповіді
			questionArray = ['В якому році Колумб відкрив Америку?','Коли народився Тарас Шевченко', 'В якому році було створено JavaScript'];
			answerArray = [['1490','1491','1492','1493'], ['9 березня 1814','10 березня 1814','27 березня 1856','27 серпня 1856'], ['1994','1995','1996','вчора','що ще за JavaScript?']]
			correctAnswerArray = [2, 0, 1]			
			for(var i = 0; i < questionArray.length; i++){
				$("#testNum").append('<span id="' + i + '">' + (i + 1) + '</span>'); //додаємо перелік ID запитань для навігації
				userAnswerArray[i] = ' '; //створюємо пустий масив відповідей користувача
			}
			$('#restResult')[0].innerHTML = ""; //очищаємо поле результат, потрібне якщо користувач повторно проходить тест
			pasteQuestion(0); //передаємо ID тесту на функцію яка виводить тест та його варіанти відповіді
			$("#startTests").attr('value', ">> Завершити тест <<"); //змінюємо текст кнопки
			start = 1; //етап тесту 1, користувач проходить тест
		} else if(start == 1){ //виконати дії при натисканні на кнопку із текстом >> Завершити тест <<
			$('#testNum').empty(); //очистити навігацію по тестах
			$('#currentTestView').empty(); //очистити поле із запитанням
			$('#startTests').attr('value', ">> Розпочати тест <<"); //змінити назву кнопки на >> Розпочати тест <<
			start = 0; //етап тесту 0, тест ще не розпочато
			var calcScore = (correctAnswerCount / questionArray.length) * 100; //розраховуємо % правильних відповідей користувача
			$('#restResult')[0].innerHTML = " Ви набрали " + calcScore.toFixed(2) + " балів з 100!"; //виводимо результат на екран
		}
	});
	$("#testNum").on('click', 'span', function(){ //виконати наступні дії при натисканні на елементі span в навігації запитань
		$('#currentTestView').empty(); //очистити поле із запитанням та його варіантами відповіді
		var clearClass = document.getElementsByClassName('current'); //отримати колекцію елементів із класом current = відображення користувачу поточного/активного запитання (окрім вже пройдених)
		for(var i = 0; i < clearClass.length; i++){ //очищаємо всі класи із назвою current
			clearClass[i].className = " ";
		}
		pasteQuestion(this.id); //відобразити запитання відповідно до натиснутого № з панелі навігації
	});
	$("#currentTestView").on('click', 'label', function(){ //дії які потрібно виконати при натисканні на будь яку із відповідей до запитання
		if(userAnswerArray[curTest] == ' '){ //виконати дії якщо користувач ще не надавав відповіді на дане запитання
			if(this.id == correctAnswerArray[curTest]){ // перевірка на те чи обрано правильну відповідь, якщо так тоді:
				chechAnswer = chech[0]; //присвоїти значення good
				correctAnswerCount += 1; //збільшити кількість правильних відповідей користувача на 1
			}
			else{ //syfrit
				chechAnswer = chech[1]; //присвоїти значення bad
			}
			$(this).attr('class', chechAnswer); //встановити відповідний клас для елемента по якому було натиснуто
			$("#testNum span:eq(" + curTest + ")").attr('class', chechAnswer); //задати той же клас для відповідного елемента навігації
			userAnswerArray[curTest] = this.id; //записуємо обрану відповідь у масив відповідей користувача
			$('#currentTestView input').attr('disabled',true); //блокуємо вибір варіантів відповіді на поточному запитанні
		}
	});
	function pasteQuestion(curQestion){ //функція відображення запитань та їх відповідей, отримує аргумент із запитанням яке необхідно відобразити
		curTest = +curQestion; //присвоюємо значення поточного запитання (конвертуємо в число, для уникнення помилок, так як id передаються як текст)
		$('#currentTestView').empty(); //очищаємо поле із запитанням
		$("#currentTestView").append('<div><b>Запитання ' + (curTest + 1) + '.</b> ' + questionArray[curTest] + '</div>'); //додаємо обране запитання
		if($("#testNum span:eq(" + curTest + ")").attr('class') == undefined || $("#testNum span:eq(" + curTest + ")").attr('class') == " "){ //перевірка на наявність класу в потрібного елемента навігації, якщо пусто, або немає:
			$("#testNum span:eq(" + curTest + ")").attr('class', 'current'); //встановити елементу навігації клас із поточним завданням
		}
		for(var i = 0; i < answerArray[curTest].length; i++){ //перебираємо усі варіанти відповіді до запитання
			chechAnswer = "";
			if(userAnswerArray[curTest] == i.toString()){ //якщо у нас є відповідь користувача на дане запитання і вона = і-му елементу тоді:
				if(userAnswerArray[curTest] == correctAnswerArray[curTest]){ //перевіряємо чи дана відповідь є правильною, якщо так:
					chechAnswer = 'class = "' + chech[0] + '"'; //задаємо назву класу good
				}
				else{ //якщо ні
					chechAnswer = 'class = "' + chech[1] + '"'; //задаємо назву класу bad
				}
				$('#currentTestView input').attr('disabled',true); //блокуємо вибір варіантів відповіді на поточному запитанні
			}
			$("#currentTestView").append('<label id = "' + i + '"' + chechAnswer + '><input type="radio" name="testAnswer">' + answerArray[curTest][i] + '</label>'); //виводимо варіант відповіді		
		}
	}
});

DEMO

Тестовий тест ☺


Завантажити файли можна за посиланнями:

Завантажити з Завантажити з


view575like0dislike0 avatard_l4w clock 2017-03-24 09:11

Коментарі:



Для даної статті відсутні коментарі

Про нас

"Programmers World" розроблено з метою полегшення в освоєнні навичок програмування, та поширення матеріалів з сфери ІТ Українською мовою.

Кожен бажаючий може безкоштовно користуватися ресурсами сайту, щоб:

- Вивчати теоретичні аспекти мов програмування

- Переглядати практичне застосування теорії при виконанні різних міні проектів з відкритим кодом

- Розміщати свої завдання на форумі для допомоги в їх реалізації, або готового коду який може бути корисний іншим користувачам

- Спілкуватись з іншими користувачами та обмінюватись досвідом

Сайт функціонує на безопланій основі та ентузіазмі розробника, якщо Ви бажаєте долучитись до розвитку даного проекту то можете пожертвувати кошти на рахунки розміщені в блоці "Допомога сайту".

Сайт

Зареєстровані користувачі можуть скористатися системою діалогів, в профілі користувача, для отримання потрібної інформації. Написати!

Також Ви можете використати форми відправки Зауважень та Пропозицій.


Електронна пошта

Ви можете звертатись на нашу поштову скриньку site.programmersworld@gmail.com

www.000webhost.com