From aba5404bb495450d727008168b99b7ea24a94081 Mon Sep 17 00:00:00 2001
From: Gleb Kolonin <topsecretway@yandex.ru>
Date: Mon, 22 Jan 2024 18:40:59 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9A=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=B8=20?=
 =?UTF-8?q?=D1=80=D0=B5=D1=84=D0=B0=D0=BA=D1=82=D0=BE=D1=80=D0=B8=D0=BD?=
 =?UTF-8?q?=D0=B3=20=D0=BA=D0=BE=D0=B4=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                      |   2 +-
 js/events/eventsController.js   |   2 +-
 js/events/eventsScroll.js       |  10 +-
 js/events/eventsSideBlock.js    |  20 ++--
 js/members/membersBlock.js      |   6 +-
 js/members/membersController.js |   1 -
 js/members/membersScroll.js     |   9 +-
 js/testForm.js                  | 178 +++++++++++++++++++++-----------
 8 files changed, 150 insertions(+), 78 deletions(-)

diff --git a/index.html b/index.html
index 77daa03..852d7e0 100644
--- a/index.html
+++ b/index.html
@@ -148,7 +148,7 @@ <h1 class="test heading">Поздравляю, вы прошли тест!</h1>
           <li><a href="#">Frontend-разработчик</a></li>
           <li><a href="#">React: библиотека фронтенд-разработки</a></li>
         </ul>
-
+        
         <ul id="legend" class="hidden">
           <li>
             <span class="profession">Тестировщик</span>
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;
     }
 }