Покритикуйте код новичка кому не сложно(HTML,CSS,JS)

[vchmuzh]

Это можно сказать мое первое JS приложение.
Задание взял с elance.
Само задание
При выполнении не использовал ни каких библиотек(т.к. их еще не учил ).
Целью было - закрепить материал пройденный на learn.javascript.ru до раздела "Анимация" (включительно).
Готовое задание
Поддержка ie7+ современные браузеры.

Так как учу все сам, дома, нет знакомых кто бы шарил в этой области - прошу помощи у профи на этом сайте.
У кого есть время и желание покритикуйте код, укажите на ошибки.
Буду рад любой критике(html, css, js, стиль кода и все в общем).

[Илья Кантор]

Лучше структурируйте код, желательно использовать ООП, шаблоны.

Задача интересная. Может, добавлю как-нибудь на learn

[Aetae]

label на цифру не хватает, а то я неспамши только с третьего раза на точку попадаю.)

[melky]

Это можно сказать мое первое JS приложение.

Сколько JS по времени учили?

Ну, сами напросились! (шучу)

var OPTIONS = 6; // кол-во вариантов ответа

Не сказать, что плохо - это деревянно. Нельзя создать опрос с разным количеством вариантов ответа. << сказали "шесть" - значит "шесть"! >>

countAnswers(target); /* при каждом ответе делается пресчет всех уже сделанных ответов
							если ответы даны на все вопросы - секция закрывается автоматически и подводится итог*/

трудоёмко. обычно для последовательной записи используют массивы.

function addClass(elem, cls) {
		var arr = elem.className.split(' ');
		for(var i=0; i<arr.length; i++) {
			if(arr[i] == cls) return;
		}
		arr.push(cls);
		return elem.className = arr.join(' ');
	}
	
	function removeClass(elem, cls) {
		var arr = elem.className.split(' ');
		for(var i=0; i<arr.length; i++) {
			if(arr[i] == cls) arr.splice(i--, 1);
		}		
		return elem.className = arr.join(' ');
	}
	
	function hasClass(elem, cls) {
		var arr = elem.className.split(' ');
		for(var i=0; i<arr.length; i++) {
			if(arr[i] == cls) return true;
		}
		return false;
	}

вообще, код организован по процедурному принципу "никаких объектов, только функции".

такой код может быть трудно расширять и дополнять. (сам так пишу на коленке)

наверное, настало время почитать про такие штуки, как паттерны. MVC тот же, например.

function animate(opts) {

  var start = new Date;
  var delta = opts.delta || linear;

  var timer = setInterval(function() {
    var progress = (new Date - start) / opts.duration;

    if (progress > 1) progress = 1;
	
    opts.step(1 - delta(1 - progress) );

    if (progress == 1) {
      clearInterval(timer);
      opts.complete && opts.complete();
    }
  }, opts.delay || 13);

  return timer;
}

родная тоже с неё начинал понимание, пока не прошибло.

задержка в 13 мс. по-умолчанию даёт ~77 кадра в секунду. Это потрясно.

[vchmuzh]

Спасибо всем большое за советы! Все учту.

Задача интересная. Может, добавлю как-нибудь на learn

Круто

Сколько JS по времени учили?

Где-то месяца три , по выходным и иногда по вечерам после работы.

обычно для последовательной записи используют массивы.

Можно немного подробнее? Не совсем понимаю.

[jqueryscripter]

Зачем вводить в заблуждение новичков? Используемое число, близкое к 13 мс, объясняется, например, у Николаса Закаса в его книге "JavaScript. Оптимизация производительности" - books.ru качается демка книги с упомянутым текстом.
"Точность таймера

Таймеры в JavaScript не отличаются высокой точностью и могут ошибаться на несколько миллисекунд в ту или иную сторону. Если при создании таймера указан интервал 250 мс, это еще не означает, что задание будет добавлено в очередь ровно через 250 мс после вызова setTimeout(). Все броузеры стараются обеспечить максимально высокую точность, но ошибки на несколько миллисекунд в ту или иную сторону нередки. Поэтому таймеры не считаются надежным средством измерения интервалов времени. Разрешающая способность таймеров в Windows составляет 15 мс, поэтому задержка 15 мс, указанная при создании таймера, будет интерпретироваться как 0 или 15 мс в зависимости от момента последнего обновления системного времени. Использование задержек менее 15 мс в Internet Explorer может привести к блокировке броузера, поэтому минимальная задержка, которую рекомендуется устанавливать в нем, составляет 25 мс (которая будет интерпретироваться как 15 или 30 мс), чтобы гарантировать минимальную задержку 15 мс. Такое ограничение минимальной величины задержки также позволит избежать проблем, связанных с разрешающей способностью таймеров в других броузерах и в других системах. Большинство броузеров показывает снижение точности срабатывания таймеров при использовании задержек менее 10 мс."

[melky]

Можно немного подробнее? Не совсем понимаю.

section.total += +questions[i].answer;// сумма балов
			ready++; // кол-во готовых ответов

Это может высчитываться при клике. Есть массив вопросов, где лежит информация о каждом вопросе - сумма баллов, кол-во готовых ответов.

Зачем вводить в заблуждение новичков? Используемое число, близкое к 13 мс, объясняется, например, у Николаса Закаса в его книге "JavaScript. Оптимизация производительности" - books.ru качается демка книги с упомянутым текстом.
"Точность таймера

Нет, не качается - в статье обьясняется, почему берётся именно такой интервал, да и почему вообще интервал, а не таймаут. И вообще, эта тема уже не раз разжёвана, как в интернетах, так и в учебнике. И если уж на то пошло, то лучше бы Вы указали на предпочтительное использование requestAnimationFrame вместо интервалов\таймаутов.

... по демке, кстати, не оценил книгу, т.к. не нашёл оглавления. его можно где-нибудь увидеть?

[vchmuzh]

section.total += +questions[i].answer;// сумма балов
ready++; // кол-во готовых ответов

Это может высчитываться при клике.

Это высчитывается при клике.

Есть массив вопросов, где лежит информация о каждом вопросе - сумма баллов, кол-во готовых ответов.

Я примерно понимаю что вы имеете ввиду, но не могу додуматься как
это реализовать, что бы пользователь мог возвращаться, менять свой ответ и пропускать вопросы.

[melky]

Это высчитывается при клике.

нет, в цикле. я имеел в виду прибавлять сразу, на месте, без обхода всех вопросов.

[vchmuzh]

нет, в цикле. я имеел в виду прибавлять сразу, на месте, без обхода всех вопросов.

начинаю понимать.

Можно сделать так:
в объекте section добавить такое свойство

section.numberOfCurrentQuestion

и при пререходе от вопроса к вопросу, следующему или предыдущему, менять его на +1, или -1 соответственно.

и свойство

section.arrayOfAnswers

- значением которого будет массив, в котором в каждом элементе будут данные баллах полученных за ответ на конкретный вопрос

потом при ответе(клике)
считаем общую сумму баллов и кол-во готовых ответов section.sumOfReady =0; и section.totalScore = 0;

var current = section.numberOfCurrentQuestion;// индекс текущего вопроса

 if(section.arrayOfAnswers[current]) { // если ответ на этот вопрос уже был сделан
    
    section.totalScore -=  +section.arrayOfAnswers[current];// отнимаем баллы прошлого ответа
    section.arrayOfAnswers[current] = input.value ;// меняем старый результат ответа на новый
    section.totalScore +=  +section.arrayOfAnswers[current]; // прибавляем баллы нового ответа

 } else {// если еще не сделан
     section.arrayOfAnswers[current] = input.value;// кол-во баллов за этот ответ
    
    section.totalScore +=  +section.arrayOfAnswers[current];// прибавляем баллы к общей сумме;
    section.sumOfReady++;// еще один готовый ответ
 }

Как то так правильно?
пока проще ничего придумать не могу.