Quiz

DOCS.md

@@ -146,6 +146,8 @@ map.tag(/* TAG элемента */); // Вернет экземпляр map дл
 map.attach(/* событие */, /* функция */); // EventHandler
 map.attribute(/* Имя */, /* Значение */); // Задание атрибута
 map.add(/* HTML */);
+map.all(/* CSS-селектор */); // Вернет массив экземпляров map для выбранных элементов
+map.property(/* свойство элемента */[, /* значение */]);
 /*
  * Функция в attach может принимать параметр.
  * Этот параметр - обьект Find, map которого был вызван

Find/Find.js

@@ -31,6 +31,26 @@ class FindObjectMap {
         this._num = num;
         return this;
     }
+    all(q) {
+        const o = this.root.querySelectorAll(q);
+        if (typeof o === "undefined") {
+            PrivateFind.error("Нет обьектов для селектора!");
+            return undefined;
+        }
+        let arr = new Array();
+        for (let i = 0; i < o.length; i ++) {
+            arr[i] = new FindObjectMap(o[i], this._app, this._num + 1)
+        }
+        return arr;
+    }
+    property(property, to) {
+        if (typeof to === "undefined") {
+            return this.root[property];
+        } else {
+            this.root[property] = to;
+            return this;
+        }
+    }
     select(q) {
         const o = this.root.querySelector(q);
         if (typeof o === "undefined") {
@@ -39,6 +59,12 @@ class FindObjectMap {
         }
         return new FindObjectMap(o, this._app, this._num + 1);
     }
+    status() {
+        if (typeof this.root === "object" && this.root !== null && this.root !== undefined) {
+            return true;
+        }
+        return false;
+    }
     read() {
         return this.root.innerHTML;
     }
@@ -85,7 +111,7 @@ class FindObjectMap {
     }
     attach(event, func) {
         this.root.addEventListener(event, () => {
-            func(this._app);
+            func(this._app, this);
         });
         return this;
     }

demos/Quiz/index.js

@@ -1,20 +1,33 @@
-const qestions = [
+const questions = [
     {
-        qestion: "Мой вопрос",
+        image: "image.avif",
+        question: "Мой вопрос",
         variants: [
             "Вариант 1",
             "Вариант 2",
             "Вариант 3"
         ],
         correct: 0
+    },
+    {
+        question: "Мой вопрос",
+        variants: [
+            "Вариант 1",
+            "Вариант 2",
+            "Вариант 3"
+        ],
+        correct: [0, 1]
     }
 ];
 
 class Quiz extends Find.createApp() {
-    constructor(qestions) {
+    constructor(questions) {
         const root = Find.search('root');
         super(root);
-        this.qestions = qestions;
+        this.question_type = undefined;
+        this.questions = questions;
+        this.question = null;
+        this.correctCount = 0;
     }
 
     init() {
@@ -22,11 +35,12 @@ class Quiz extends Find.createApp() {
         this.setMeta();
         this.setCard();
         this.stable();
-        this.createQestions();
+        this.createQuestions();
     }
 
     setCard() {
         this.add([
+            Find.content('<div id="message"></div>'),
             Find.content(
                 `<div class="card">
                     <div class="card-header">
@@ -41,7 +55,7 @@ class Quiz extends Find.createApp() {
                         <button 
                             class="button" 
                             style="width: 100%;"
-                            id="test"
+                            id="test_select"
                         >Проверить</button>
                     </div>
                 </div>`
@@ -52,63 +66,274 @@ class Quiz extends Find.createApp() {
     setMeta() {
         this.meta([
             Find.content('<meta name="viewport" content="width=device-width, initial-scale=1">'),
-            Find.content('<style>body { margin: 20px; } </style>')
+            Find.content('<style>body { margin: 20px; } </style>'),
+            Find.content(
+                `<style>    
+                    .fit-image {
+                        object-fit: contain;
+                        width: 100%;
+                        height: 100%;
+                    }
+                </style>`
+            )
         ]);
     }
 
-    createQestions() {
+    createQuestions() {
         this.number = 0;
-        for (let i = 0; i < this.qestions.length; i ++) {
-            this.select('qestion' + this.number);
-            this.setTitle();
-            this.render();
-            this.setForms(this.qestions[i]);
-            this.setEvents(this.qestions[i])
-            .then((result) => {
+        this.questionsWaiter(null);
+    }
+
+    questionsWaiter(status) {
+        const results = [
+            {
+                source: "no_select",
+                text: "Не выбран не один вариант!",
+                type: "error"
+            },
+            {
+                source: "incorrect",
+                text: "Неправильный ответ!",
+                type: "error"
+            },
+            {
+                source: "correct",
+                text: "Правильный ответ!",
+                type: "success"
+            }
+        ];        
+
+        const isEnd = (this.questions.length === this.number);
+        if (!isEnd) this.question = this.questions[this.number];
+        this.select('question' + this.number);
+        this.setTitle();
+        this.render();
+        this.setStatus(status);
+        this.setForms(isEnd);
+        this.attachDeleteButton();
+        if (isEnd) return;
+        this.setEvents().then((result) => {
+            if (result !== 'no_select') {
                 this.number ++;
-            })
-            .catch((error) => {
-                    
-            });
-            this.number ++;
+            }
+
+            let obj = undefined;
+            for (obj of results) {
+                if (obj.source == result) break;
+            }
+            
+            this.questionsWaiter(obj);
+        });
+    }
+
+    setStatus(status) {
+        const root = this.component();
+        const message = root.id('message');
+        if (status !== null) {
+            const elem = status.type === 'error' ? 
+            'is-danger' : 
+            'is-success';
+            message.html(
+                Find.content(
+                    `<div 
+                        class="notification ${elem}" 
+                        style="margin-bottom: 10px;">
+                        <button class="delete" id="delete-info"></button>
+                            ${status.text}
+                    </div>`
+                )
+            );
         }
     }
 
-    setEvents() {}
-
-    setTitle() {
-        this.title('Quiz qestion ' + this.number + ' - Find.js demo');
+    attachDeleteButton() {
+        const root = this.component();
+        const button = root.id('delete-info');
+        if (button.status()) button.attach('click', app => {
+            const root = app.component();
+            root.id("message").html('<!-- deleted -->');
+        });
     }
 
-    setForms(qe) {
+    setEvents() {
+        const root = this.component();
+        const que = this.question;
+        const main = this;
+        return new Promise((resolve, reject) => {
+            const get_select = function() {
+                const button = root.id('test_select');
+                button.attach('click', () => {
+                    const name = 'question';
+                    const type = main.question_type;
+                    let correct = false;
+
+                    if (type === 'radio') {
+                        const elem = root.select(`input[name="${name}"]:checked`);
+
+                        if (!elem.status()) {
+                            resolve('no_select');
+                            return;
+                        }
+
+                        const answer = Number(elem.value());
+
+                        if (answer === que.correct) correct = true;
+                    } else {
+                        const elements = root.all('input[type="checkbox"]:checked'); 
+
+                        if (elements.length === 0) {
+                            resolve('no_select');
+                            return;
+                        }
+                        
+                        const answer = elements.map(elem => Number(elem.property('id').slice(7)));
+
+                        let correct_count = 0;
+                        for (let i = 0; i < que.correct.length; i ++) {
+
+                            if (
+                                answer[i] === undefined ||
+                                answer[i] === null
+                            ) break;
+
+                            if (answer[i] === que.correct[i]) {
+                                correct_count ++;
+                            }
+                        }
+
+                        if (correct_count === que.correct.length) {
+                            correct = true;
+                        }
+                    }
+
+                    if (correct) {
+                        main.correctCount ++;
+                        resolve('correct');
+                    } else {
+                        resolve('incorrect');
+                    }
+                });
+            };
+            try {
+                get_select();
+            } catch (err) {
+                reject(err);
+            }
+        });
+    }
+
+    setTitle() {
+        const isEnd = (this.questions.length === this.number);
+        if (!isEnd) {
+            this.title(`Quiz вопрос ${String(this.number + 1)}/${this.questions.length} - Find.js демо`);
+        } else {
+            this.title('Результаты!');
+        }
+    }
+
+    setForms(isDone) {
+        if (isDone) {
+            this.viewResults();
+            return;
+        }
+
+        const que = this.question;
         let input_id = 0;
         const root = this.component();
         const content = root.id("content");
         const title = root.id("title");
-        title.text(qe.qestion);
-        for (let val in (qe.variants)) {
-            content.add(
-                Find.content(
-                    `<input 
-                        type="radio" 
-                        id="variant${input_id}" 
-                        name="radiobutton">
-                        <label class="radio" for="variant${input_id}">
-                            <span class="has-text-weight-medium" id="text${input_id}"></span>
-                        </label>
-                    </input>
-                    <br>`
-                )
+        title.text(que.question);
+
+        if (Array.isArray(que.correct)) {
+            this.question_type = 'checkbox';
+        } else {
+            this.question_type = 'radio';
+        }
+
+        let image = '<!-- no image -->';
+        if (typeof que.image !== "undefined") {
+            image = Find.content(
+                `<figure
+                    class="fit-image"
+                    style="margin-bottom: 20px;">
+                    <img 
+                        src="${que.image}"
+                        style="border-radius: 20px;"
+                        alt="Изображение к вопросу">
+                    </img>
+                </figure>`
             );
-            content.id('text' + input_id).text(qe.variants[val]);
+            content.add(image);
+        }
+
+        for (let val in (que.variants)) {
+            if (Array.isArray(que.correct)) {
+                this.question_type = 'checkbox';
+                content.add(
+                    Find.content(
+                        `<label class="checkbox">
+                            <input 
+                                type="checkbox"
+                                id="variant${input_id}" 
+                                value="${input_id}"
+                                name="question">
+                            </input>
+                            <span 
+                                class="has-text-weight-medium" 
+                                id="text${input_id}">
+                            </span>
+                        </label>
+                        <br />`
+                    )
+                );
+            } else {
+                content.add(
+                    Find.content(
+                        `<input 
+                            type="radio" 
+                            id="variant${input_id}" 
+                            value="${input_id}"
+                            name="question">
+                            <label class="radio" for="variant${input_id}">
+                                <span class="has-text-weight-medium" id="text${input_id}"></span>
+                            </label>
+                        </input>
+                        <br />`
+                    )
+                );
+            }
+            content.id('text' + input_id).text(que.variants[val]);
             input_id ++;
         }
     }
 
-    setEvents(r) {
+    viewResults() {
+        const root = this.component();
+        const button = root.id("test_select");
+        const content = root.id("content");
+        const title = root.id("title");
+        let text = 'Попробовать снова';
+        let out = ` - ${this.correctCount / (this.questions.length / 100)}%`;
+        const user = 
+            this.correctCount !== this.questions.length ? 
+            `${this.correctCount} вопросов из ${this.questions.length}.` : 
+            'все вопросы!';
 
+        if (this.correctCount > (this.questions.length / 2)) {
+            text = 'На главную';
+        }
+        title.text(`Ваш результат ${out}`);
+        button.text(text);
+        content.html(
+            Find.content(
+                `<span class="has-text-weight-bold">
+                    Вы правильно ответили на ${user}
+                </span>`
+            )
+        );
+        button.attach('click', () => location.reload());
     }
 }
 
-const quiz = new Quiz(qestions);
+const quiz = new Quiz(questions);
 quiz.init();