diff --git a/index.html b/index.html
index 77daa03..852d7e0 100644
--- a/index.html
+++ b/index.html
@@ -148,7 +148,7 @@
Поздравляю, вы прошли тест!
Frontend-разработчик
React: библиотека фронтенд-разработки
-
+
-
Тестировщик
diff --git a/js/events/eventsController.js b/js/events/eventsController.js
index 8af0c40..cf7d12d 100644
--- a/js/events/eventsController.js
+++ b/js/events/eventsController.js
@@ -143,7 +143,7 @@ document.getElementById("title").innerHTML = eventsList[eventsList.length - 1].t
document.getElementById("description").innerHTML = eventsList[eventsList.length - 1].description;
// Заполнение карточки по клику на неё.
for (let index = 0; index < eventsList.length; index++) {
- console.log(index);
+ // console.log(index);
document.getElementById("sideBlock").children[index].children[0].addEventListener("click", function() {Oliver(index);});
}
// Добавление всплывающих окон с подробной информацией о событиях (pop-ups)
diff --git a/js/events/eventsScroll.js b/js/events/eventsScroll.js
index 00c338c..3e5c14b 100644
--- a/js/events/eventsScroll.js
+++ b/js/events/eventsScroll.js
@@ -1,8 +1,10 @@
// Здесь описана анимация изменения размера и цвета пролистываемых мероприятий
requestAnimationFrame(() => {
+ // Обнаружение всех элементов с классом box
const boxes = document.querySelectorAll(".box");
let carousel = document.getElementById("carouselGallery")
+ // Функция для вычисления коэфициента пересечения 2х элементов
function getIntersectionRatio(i) {
const a = [carousel.scrollTop, carousel.scrollTop + carousel.clientHeight];
const b = [boxes[i].offsetTop, boxes[i].offsetTop + boxes[i].clientHeight];
@@ -13,9 +15,12 @@ requestAnimationFrame(() => {
return Math.max(0, (min - max) / (b[1] - b[0]));
}
+ // Функция вызываемая при прокрутке страницы
function onScroll() {
var boxes = document.querySelectorAll(".bigger .box");
let lastActiveElemI = 0;
+
+ // Применение стилей к дочернему элементу каждого box
for (let i = 0; i < boxes.length; i++) {
const intersection = getIntersectionRatio(i);
const top = boxes[i].offsetTop - carousel.scrollTop < 0;
@@ -28,10 +33,13 @@ requestAnimationFrame(() => {
background-image: ${eventsList[i].background};
`;
- if (intersection === 1){
+ if (intersection === 1) // Если элемент полностью видим
+ {
lastActiveElemI = i;
}
}
+
+ // Обновляем активный элемент и применяем стили
if (lastActiveElemI !== activeElemI && lastActiveElemI !== 0) {
boxes[activeElemI].classList.remove("active");
boxes[lastActiveElemI].classList.add("active");
diff --git a/js/events/eventsSideBlock.js b/js/events/eventsSideBlock.js
index b637009..4fc92c7 100644
--- a/js/events/eventsSideBlock.js
+++ b/js/events/eventsSideBlock.js
@@ -1,5 +1,6 @@
// Данная функция добавляет и отображает дату с боку от просматриваемого мероприятия (Controller part)
class EventsSideBlock {
+ // Создание элемента div для блока
element = document.createElement("div");
title;
background;
@@ -7,29 +8,36 @@ class EventsSideBlock {
year;
month;
- set["bg"](v) {
- this.background = v;
- this.element.lastElementChild.style.backgroundImage = v;
+ // Свойство установки фона блока
+ set["bg"](background_value)
+ {
+ this.background = background_value;
+ this.element.lastElementChild.style.backgroundImage = background_value;
}
- constructor({title, background, description, daddy, year, month}) {
+ // Конструктор всего блока
+ constructor({title, background, description, daddy, year, month})
+ {
let element1 = this.element;
element1.classList = ["box"];
element1.appendChild(document.createElement("div"));
+ // Инициализируем свойства блока
this.title = title;
this.description = description;
- this.bg = background;
+ this.bg = background; // Используем свойство bg для установки фона
this.year = year;
this.month = month;
+ // Создаем и добавляем внутренний слой блока
let sup_layer = Object.assign(document.createElement("div"));
element1.children[0].appendChild(sup_layer).classList.add('sup_layer');
+ // Создаем и добавляем span с заголовком внутреннего слоя
let span = Object.assign(document.createElement("span"), {innerHTML: title});
element1.children[0].children[0].appendChild(span);
+ // Добавление сформированного блока в родительский элемент
daddy.appendChild(element1);
}
}
-
diff --git a/js/members/membersBlock.js b/js/members/membersBlock.js
index 31a5938..3375506 100644
--- a/js/members/membersBlock.js
+++ b/js/members/membersBlock.js
@@ -11,6 +11,7 @@ class Member{
constructor({name, age, faculty, photo, abstract, cvLink, cvLinkAddress, daddy}) {
let element = this.element;
+ // Клонирование содержимого шаблона, для создания настоящей карточки
let template = document.getElementById("member_template").content.cloneNode(true);
element.classList.add("member");
@@ -23,18 +24,21 @@ class Member{
this.cvLink = cvLink;
this.cvLinkAddress = cvLinkAddress;
+ // Заполнение структуры карточки данными из параметров
template.querySelector(".member_faculty").innerHTML = faculty;
template.querySelector(".member_name").innerHTML = name;
template.querySelector(".member_age").innerHTML = age;
template.querySelector(".member_photo").setAttribute("src", photo);
template.querySelector(".member_desc").innerHTML = abstract;
+ // Заполнение элемента под ссылку в карточке ссылкой так, чтобы она была интерактивной.
let elementLink = template.querySelector(".member_cv");
elementLink.innerHTML = cvLink;
elementLink.setAttribute("href", cvLinkAddress)
elementLink.setAttribute("target", "_blank");
- // Заполнение карточки с использованием шаблона
+ // Добавление карточки сформированной с использованием шаблона
+ // в родительский элемент
element.appendChild(template);
daddy.appendChild(element);
}
diff --git a/js/members/membersController.js b/js/members/membersController.js
index 9b1063b..3c896de 100644
--- a/js/members/membersController.js
+++ b/js/members/membersController.js
@@ -1,7 +1,6 @@
// Тут данные для заполнения (Model part)
let memberBlock = document.getElementById("memberBlock");
-console.log(memberBlock);
let membersList = [];
diff --git a/js/members/membersScroll.js b/js/members/membersScroll.js
index d2bd694..54b2364 100644
--- a/js/members/membersScroll.js
+++ b/js/members/membersScroll.js
@@ -1,15 +1,10 @@
+// Слайдер для участников
$('.memberBlock').slick({
dots: false,
adaptiveHeight: true,
});
-$(".intro").slick({
- slidesToShow: 8 ,
- slidesToScroll: 1,
- autoplay: true,
- autoplaySpeed: 2000
-});
-
+// Слайдер для мероприятий
$("#events > .smaller > .slider").slick({
slidesToShow: 1,
slidesToScroll: 1,
diff --git a/js/testForm.js b/js/testForm.js
index c0478a8..d4384c5 100644
--- a/js/testForm.js
+++ b/js/testForm.js
@@ -3,7 +3,7 @@
let selected;
let data;
let oReq = new XMLHttpRequest();
-let questNum = -1;
+let questNum = -1; // Так как тестирование ещё не началось
let answersArr = [];
let fullstackDeloveperScale = 0;
let qaSpecialistScale = 0;
@@ -18,9 +18,76 @@ let nextButton = document.getElementById("next");
let questionForm = document.getElementById("questionForm");
let greeting = document.getElementById("greeting");
let points = document.getElementsByClassName("points");
-let list = document.getElementsByClassName("list");
+let list = document.getElementsByClassName("list"); // Список полезных ссылок для профессии
+// Отображение результатов теста
+function resultDisplay(resArr) {
+ // Сокрытие формы опроса
+ questionForm.hidden = true;
+ backButton.hidden = true;
+ nextButton.hidden = true;
+
+ // Отображение результата
+ document.getElementById("resultForm").hidden = false;
+
+ // Наиболее подходящая профессия и её %
+ document.getElementById("resultProfession").textContent =
+ data[`${resArr[0].name}DisplayName`] +
+ ` - ${Math.round((resArr[0].score / 12) * 100)}%`; // в тесте 12 вопросов
+
+ // Что это за профессия
+ document.getElementById("firstProfParagraph").textContent = `${
+ data[resArr[0].name]
+ }`;
+ // Доп. информация о профессии
+ document.getElementById("secondProfParagraph").textContent =
+ data[`${resArr[0].name}SecondParagraph`];
+ document.getElementById("modal").className = "test button more"; // Пройти тест заново
+
+ // На сколько подходят остальные профессии
+ points[0].textContent = qaSpecialistScale;
+ points[1].textContent = mobileAppsDeveloperScale;
+ points[2].textContent = frontendDeloveperScale;
+ points[3].textContent = fullstackDeloveperScale;
+ // console.log("qaSpecialistScale", points[0]);
+ // console.log("mobileAppsDeveloperScale", points[1]);
+ // console.log("frontendDeloveperScale", points[2]);
+ // console.log("fullstackDeloveperScale", points[3]);
+
+ // Отображение ссылок-рекомендации для наиболее подходящей профессии
+ linkDisplay(resArr);
+
+ // 2ая наиболее подходящая профессия
+ document.getElementById("secondprof").textContent =
+ `Также обратите внимание на профессию ` + data[`${resArr[1].name}DisplayName`];
+}
+
+// Отображение ссылок на рекомендации по профессиям
+function linkDisplay(resArr) {
+ // Очистка списка с ссылками
+ for (let i = 0; i < list.length; i++)
+ {
+ list[i].innerHTML = "";
+ }
+
+ // Формирование списка ссылок-рекомендаций для лучшей профессии
+ // Путём итерации по всем профессиям и их ссылкам-рекомендациям
+ for (let i = 0; i < resArr.length; i++) {
+ for (let j = 0; j < data[`${resArr[i].name}links`].length; j++) {
+ let li = document.createElement("li");
+ li.id = `list${i}Item${j}`;
+ let a = document.createElement("a");
+ document.getElementsByClassName("list")[i].append(li);
+ document.getElementById(`list${i}Item${j}`).append(a);
+ a.href = data[`${resArr[i].name}links`][j];
+ a.textContent = data[`${resArr[i].name}names`][j];
+ }
+ }
+}
+
+// Подсчёт результатов теста
function resultCounting() {
+ // Используя массив ответов определяем насколько подходят профессии
for (let i = 0; i < answersArr.length; i++) {
switch (answersArr[i]) {
case "front":
@@ -38,6 +105,7 @@ function resultCounting() {
}
}
+ // Формирование массива результатов теста и сортировка по убыванию набранных очков
let resArr = [
{ name: "FRONTEND", score: frontendDeloveperScale },
{ name: "MOBILE", score: mobileAppsDeveloperScale },
@@ -48,44 +116,60 @@ function resultCounting() {
return b.score - a.score;
});
resArr.splice(2);
- resultDisplay(resArr);
+ resultDisplay(resArr); // Наиболее подходящие профессии
}
+// Парсинг данных из json файла
function jsonLoading() {
oReq.onload = reqListener;
oReq.open("get", "data.json", true);
oReq.send();
}
+
function reqListener(e) {
data = oReq.response;
data = JSON.parse(data);
}
+// Функция отображения вопроса
function showQuestion() {
- if (questNum === data["answersArray"].length) {
+ // Если получены ответы на все вопросы
+ if (questNum === data["answersArray"].length)
+ {
resArr = resultCounting();
- } else {
+ }
+ // показать текующий вопрос и варианты ответов
+ else
+ {
+ // Сброс состояний radioButtons для очередного выбора пользователя
document.getElementsByName("pair")[0].checked = false;
document.getElementsByName("pair")[1].checked = false;
- qnum.textContent = `${questNum + 1}`;
+ qnum.textContent = `${questNum + 1}`; // Счётчик вопросов + 1
+ // Установка текста утверждений для выбора
variant1.textContent = data["answersArray"][questNum]["firstAnswer"];
variant2.textContent = data["answersArray"][questNum]["secondAnswer"];
- if(questNum >= 0) {
+ // Если тестирование началось, то отображать кнопки Назад и Далее
+ if(questNum >= 0) // Немного костыль
+ {
backButton.hidden = false;
- document.getElementById("nextbutton").textContent = "далее";
+ document.getElementById("nextbutton").textContent = "Далее";
}
}
}
+// Обновление состояния radioButton при выборе ответа
function radioupd() {
- for (let i = 0; i < inp.length; i++) {
- if (inp[i].type == "radio" && inp[i].checked) {
+ for (let i = 0; i < inp.length; i++)
+ {
+ if (inp[i].type == "radio" && inp[i].checked)
+ {
selected = i;
}
}
- checkButtonAble();
+ checkButtonAble(); // Перерасчитать возможность перехода к следующему вопросу
}
+// Вернуться к предыдущему вопросу
function backClick() {
answersArr.pop();
questNum--;
@@ -93,22 +177,33 @@ function backClick() {
checkButtonAble();
}
+// Перейти к следующему вопросу
function nextClick() {
- if (questionForm.className === "test form hidden") {
+
+ if (questionForm.className === "test form hidden")
+ {
questionForm.classList = "test form";
greeting.className = "test greeting message hidden";
}
+
radioupd();
- if (questNum === -1) {
+
+ if (questNum === -1) // Если это 1ый вопрос
+ {
questNum++;
showQuestion();
checkButtonAble();
- } else {
+ }
+ else
+ {
+ // Заполнение массива ответов
answersArr.push(data["answersArray"][questNum]["sphere"][selected]);
+ // console.log(answersArr); // добавляются названия профессий соответствующие утверждению (front, qa, ...)
questNum++;
showQuestion();
checkButtonAble();
- if (questNum <= data["answersArray"].length - 1 && questNum >= 0) {
+ if (questNum <= data["answersArray"].length - 1 && questNum >= 0)
+ {
qnum.textContent = `${questNum + 1}`;
}
}
@@ -116,60 +211,23 @@ function nextClick() {
//Функция проверяет, можно ли нажать кнопку для перехода к след. вопросу
function checkButtonAble() {
- if (questNum === 0) {
+ if (questNum === 0)
+ {
backButton.disabled = true;
- } else {
+ }
+ else
+ {
backButton.disabled = false;
}
+
if (
questNum === data["answersArray"].length ||
(document.getElementsByName("pair")[0].checked === false &&
document.getElementsByName("pair")[1].checked === false)
) {
nextButton.disabled = true;
- } else {
- nextButton.disabled = false;
}
-}
-
-function resultDisplay(resArr) {
- questionForm.hidden = true;
- document.getElementById("resultForm").hidden = false;
- backButton.hidden = true;
- nextButton.hidden = true;
- document.getElementById("resultProfession").textContent =
- data[`${resArr[0].name}DisplayName`] +
- ` - ${Math.round((resArr[0].score / 12) * 100)}%`;
- document.getElementById("firstProfParagraph").textContent = `${
- data[resArr[0].name]
- }`;
- document.getElementById("secondProfParagraph").textContent =
- data[`${resArr[0].name}SecondParagraph`];
- document.getElementById("modal").className = "test button more";
- points[0].textContent = qaSpecialistScale;
- points[1].textContent = mobileAppsDeveloperScale;
- points[2].textContent = frontendDeloveperScale;
- points[3].textContent = fullstackDeloveperScale;
- linkDisplay(resArr);
- document.getElementById("secondprof").textContent =
- `Также обратите внимание на профессию ` +
- data[`${resArr[1].name}DisplayName`];
-}
-
-function linkDisplay(resArr) {
- for (let i = 0; i < list.length; i++) {
- list[i].innerHTML = "";
- }
-
- for (let i = 0; i < resArr.length; i++) {
- for (let j = 0; j < data[`${resArr[i].name}links`].length; j++) {
- let li = document.createElement("li");
- li.id = `list${i}Item${j}`;
- let a = document.createElement("a");
- document.getElementsByClassName("list")[i].append(li);
- document.getElementById(`list${i}Item${j}`).append(a);
- a.href = data[`${resArr[i].name}links`][j];
- a.textContent = data[`${resArr[i].name}names`][j];
- }
+ else {
+ nextButton.disabled = false;
}
}