xmoonlight

Возьмите родительский идентификатор ноды и выведите туда.
Возможно, Вам подойдёт includeHTML.

Заменить -webkit-transform-style: preserve-3d на -webkit-transform-style: flat.
А менять исключительно позиционирование и z-index.

https://emailjs.org/
https://github.com/hiddentao/browsermail

Вариант 1:
Нужно, чтобы каждая окружность сама проверяла своё состояние и сообщала слушателю.
Как только создаётся окружность - вешаете на неё обработчик события столкновения.

Вариант 2:
Следите за центрами всех окружностей, чтобы контролировать столкновение.
Столкновение (касание): когда расстояние между двумя центрами окружностей равно сумме радиусов окружностей вокруг этих центров. И, соответственно, проверка на пересечение: расстояние - меньше или равно.
Проверка - итеративная:
1. После первой проверки - сортируем все пары центров с зазорами между кругами от самого близкого к самому дальнему.
2. При второй - проверяем, начиная с самого близкого и сразу рассчитываем скорость и вектор смещения. Теперь, добавляем скорость: сортируем от максимальной скорости с минимальным зазором к минимальной скорости с максимальным зазором.
3. При последующих используем информацию предыдущего шага для определения порога зоны "отсечения хвоста" при проверке по отсортированному списку: threshold.
Т.е., если мы видим, что ускорение или линейная скорость за заданное время не позволят им пересечься на этом фрейме, то мы их просто не проверяем и ставим метку: через сколько итераций мы будем проверять каждую из них (резервируем их для исключения на нескольких последующих итерационных проверках).

Таким образом, мы экономим "пустые" циклы при просчёте столкновений.

Условие при выборке из БД нужно поставить. (если...., то..., иначе...)
Проверять разницу временных меток (задачи и текущего).

includeHTML

через switch - можно всё делать....
Пример:

var output=12;
switch (true) {
    case output === 4: alert('4'); break;
    case output === 5: alert('5'); break;
    case output === 6: alert('6'); break;
    case output === 7: alert('7'); break;
    case output === 8: alert('8'); break;
    case (output>=9 && output<=12): alert('>=9 && <=12');break;
    case (output>=13 && output<=15): alert('>=13 && <=15');break;
}

/.{1,50}(?:\s|.{0,50}$)/g

Сам тест: Это "дерево" страниц (форм), условий и связей между ними в json-формате.
Самое сложное в процессе разработки - я выделю 2 пункта:
1. Контроль текущего местоположения пользователя в этом "дереве": какую форму отображаем и контроль текущего состояния данных при перемещении туда и обратно по всему "дереву" теста.
2. Правильный подсчёт промежуточных и итоговых результатов, согласно настройкам и условиям из "дерева" форм.

PS: делал лично - мороки достаточно много, если хотите получить в итоге универсальный инструмент...

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

Могу сказать, как использую сам: есть собственная либа includeHTML простая, как ведро... Но я даже не думал, что кому-то она будет нужна. Сейчас решил сделать роутинг для неё и контроль загруженных ресурсов (чтобы не грузить по несколько раз одно и то же).

Посмотрите принцип работы библиотеки: автор - я и отвечу на все вопросы, есть предложения по улучшению - также, пишите.

Не регистрировать пользователя без линка подтверждения, который отправляется на E-Mail сразу после ввода E-mail адреса.
После перехода по линку (и подтверждения со стороны сервера его корректности), уже просим ввести доп. поля: username и пароль.
Пока нет подтверждения почты - нельзя занять себе желаемый username.
Также, можно сделать наоборот: отправку e-mail на сайт с клиента почты через "mailto:".

resize и setInterval - это два события.
Почему не может-то?
Пишите обработчик на каждое событие, и в зависимости от возникновения любого события (в том числе и одновременно!), ваш обработчик (функция) будет вызываться.

Вот
(взято отсюда)

Зачем читать свойство на несуществующем объекте?
Проверьте объект:

document.body.contains(someReferenceToADomElement);

Зачем менять итеративную переменную два раза?
Нужно убавлять - измените условие внутри цикла на обратное.

Получите, распишитесь (проверено!):

<script>
var oa=window.alert;
startFrom=10; //sec
loaded=false;

  var audioAlert = new Audio("http://www.mult.ru/rings/night_elf_track.mp3");
  audioAlert.currentTime = startFrom;
  audioAlert.addEventListener('loadeddata', function() {
    if(audioAlert.readyState >= 2) {
        loaded=true;
    }
  });

window.alert = function (message) {
  if (loaded) {
      if(audioAlert.paused) {
         audioAlert.play();
         oa&oa(message);
         audioAlert.pause();
         audioAlert.currentTime = startFrom;
      }
  } else {oa('not loaded!');}
};
</script>
<div onclick=alert('hi');>Жми!</div>