Quiz example
This commit is contained in:
parent
b952b6bc86
commit
5d2fb7b107
1
DOCS.md
1
DOCS.md
@ -145,6 +145,7 @@ map.id(/* ID элемента */); // Вернет экземпляр map для
|
|||||||
map.tag(/* TAG элемента */); // Вернет экземпляр map для выбранного элемента
|
map.tag(/* TAG элемента */); // Вернет экземпляр map для выбранного элемента
|
||||||
map.attach(/* событие */, /* функция */); // EventHandler
|
map.attach(/* событие */, /* функция */); // EventHandler
|
||||||
map.attribute(/* Имя */, /* Значение */); // Задание атрибута
|
map.attribute(/* Имя */, /* Значение */); // Задание атрибута
|
||||||
|
map.add(/* HTML */);
|
||||||
/*
|
/*
|
||||||
* Функция в attach может принимать параметр.
|
* Функция в attach может принимать параметр.
|
||||||
* Этот параметр - обьект Find, map которого был вызван
|
* Этот параметр - обьект Find, map которого был вызван
|
||||||
|
|||||||
34
Find/Find.js
34
Find/Find.js
@ -56,6 +56,10 @@ class FindObjectMap {
|
|||||||
this.root.innerHTML = t;
|
this.root.innerHTML = t;
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
add(h) {
|
||||||
|
const t = this.html();
|
||||||
|
return this.html(t + String(h));
|
||||||
|
}
|
||||||
value(t) {
|
value(t) {
|
||||||
if (arguments.length == 0) {
|
if (arguments.length == 0) {
|
||||||
return this.root.value;
|
return this.root.value;
|
||||||
@ -116,6 +120,7 @@ export default class Find {
|
|||||||
/* Public section */
|
/* Public section */
|
||||||
|
|
||||||
constructor(root) {
|
constructor(root) {
|
||||||
|
this._lll = "";
|
||||||
this.root = root;
|
this.root = root;
|
||||||
this.iter = 0;
|
this.iter = 0;
|
||||||
this.groups = new Array();
|
this.groups = new Array();
|
||||||
@ -366,7 +371,14 @@ export default class Find {
|
|||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
draw(__use) {
|
draw(...args) {
|
||||||
|
this._lll = "";
|
||||||
|
this.__draw(...args);
|
||||||
|
this.root.innerHTML = this._lll;
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
__draw(__use) {
|
||||||
if (typeof this.__id === "undefined") {
|
if (typeof this.__id === "undefined") {
|
||||||
PrivateFind.error("Use select, before draw. Or you can use render.");
|
PrivateFind.error("Use select, before draw. Or you can use render.");
|
||||||
}
|
}
|
||||||
@ -379,8 +391,8 @@ export default class Find {
|
|||||||
PrivateFind.findTypeError(group.html, "object");
|
PrivateFind.findTypeError(group.html, "object");
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
this.root.innerHTML = "";
|
const isRecursive = (typeof __use === "string" && __use === '__undstta');
|
||||||
if (!(typeof __use === "string" && __use === '__undstta')) {
|
if (!isRecursive) {
|
||||||
for (let i = 0; i < this.groups.length; i ++) {
|
for (let i = 0; i < this.groups.length; i ++) {
|
||||||
if (typeof this.groups[i].every === "boolean" && this.groups[i].every) {
|
if (typeof this.groups[i].every === "boolean" && this.groups[i].every) {
|
||||||
this.render(this.groups[i].id, '__undstta');
|
this.render(this.groups[i].id, '__undstta');
|
||||||
@ -396,15 +408,27 @@ export default class Find {
|
|||||||
Array.isArray(group.meta) &&
|
Array.isArray(group.meta) &&
|
||||||
group.meta.length > 0 && this.iter === 0
|
group.meta.length > 0 && this.iter === 0
|
||||||
) {
|
) {
|
||||||
|
let n = document.head.innerHTML;
|
||||||
for (let i = 0; i < group.meta.length; i ++) {
|
for (let i = 0; i < group.meta.length; i ++) {
|
||||||
if (typeof group.meta[i] === "string") {
|
if (typeof group.meta[i] === "string") {
|
||||||
this.root.innerHTML += group.meta[i];
|
n += group.meta[i];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
document.head.innerHTML = n;
|
||||||
}
|
}
|
||||||
|
let drawer = "";
|
||||||
for (let i = 0; i < group.html.length; i ++) {
|
for (let i = 0; i < group.html.length; i ++) {
|
||||||
if (typeof group.html[i] === "string") {
|
if (typeof group.html[i] === "string") {
|
||||||
this.root.innerHTML += group.html[i];
|
drawer += group.html[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.root.innerHTML !== drawer) {
|
||||||
|
if (isRecursive) {
|
||||||
|
if (drawer.length !== 0) {
|
||||||
|
this._lll += drawer;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this._lll += drawer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.iter ++;
|
this.iter ++;
|
||||||
|
|||||||
3
demos/Quiz/bulma.min.css
vendored
Normal file
3
demos/Quiz/bulma.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
41
demos/Quiz/index.html
Normal file
41
demos/Quiz/index.html
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<!--
|
||||||
|
index.html
|
||||||
|
|
||||||
|
Copyright 2026 Lida <lida@lida-laptol>
|
||||||
|
|
||||||
|
This program is free software; you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU General Public License as published by
|
||||||
|
the Free Software Foundation; either version 2 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU General Public License
|
||||||
|
along with this program; if not, write to the Free Software
|
||||||
|
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
|
||||||
|
MA 02110-1301, USA.
|
||||||
|
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||||
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Find</title>
|
||||||
|
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
||||||
|
<meta name="generator" content="Geany 2.0" />
|
||||||
|
<link rel="stylesheet" href="bulma.min.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script src="nomodule-find.min.js"></script>
|
||||||
|
<script src="index.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
114
demos/Quiz/index.js
Normal file
114
demos/Quiz/index.js
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
const qestions = [
|
||||||
|
{
|
||||||
|
qestion: "Мой вопрос",
|
||||||
|
variants: [
|
||||||
|
"Вариант 1",
|
||||||
|
"Вариант 2",
|
||||||
|
"Вариант 3"
|
||||||
|
],
|
||||||
|
correct: 0
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
class Quiz extends Find.createApp() {
|
||||||
|
constructor(qestions) {
|
||||||
|
const root = Find.search('root');
|
||||||
|
super(root);
|
||||||
|
this.qestions = qestions;
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.select('com.find.demos.quiz');
|
||||||
|
this.setMeta();
|
||||||
|
this.setCard();
|
||||||
|
this.stable();
|
||||||
|
this.createQestions();
|
||||||
|
}
|
||||||
|
|
||||||
|
setCard() {
|
||||||
|
this.add([
|
||||||
|
Find.content(
|
||||||
|
`<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<p class="card-header-title">
|
||||||
|
<span id="title">
|
||||||
|
Загрузка...
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="content" id="content"></div>
|
||||||
|
<button
|
||||||
|
class="button"
|
||||||
|
style="width: 100%;"
|
||||||
|
id="test"
|
||||||
|
>Проверить</button>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
)
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
setMeta() {
|
||||||
|
this.meta([
|
||||||
|
Find.content('<meta name="viewport" content="width=device-width, initial-scale=1">'),
|
||||||
|
Find.content('<style>body { margin: 20px; } </style>')
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
createQestions() {
|
||||||
|
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.number ++;
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
|
||||||
|
});
|
||||||
|
this.number ++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setEvents() {}
|
||||||
|
|
||||||
|
setTitle() {
|
||||||
|
this.title('Quiz qestion ' + this.number + ' - Find.js demo');
|
||||||
|
}
|
||||||
|
|
||||||
|
setForms(qe) {
|
||||||
|
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>`
|
||||||
|
)
|
||||||
|
);
|
||||||
|
content.id('text' + input_id).text(qe.variants[val]);
|
||||||
|
input_id ++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setEvents(r) {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const quiz = new Quiz(qestions);
|
||||||
|
quiz.init();
|
||||||
1
demos/Quiz/nomodule-find.min.js
vendored
Normal file
1
demos/Quiz/nomodule-find.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -29,6 +29,7 @@
|
|||||||
<title>Find</title>
|
<title>Find</title>
|
||||||
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
||||||
<meta name="generator" content="Geany 2.0" />
|
<meta name="generator" content="Geany 2.0" />
|
||||||
|
<link rel="stylesheet" href="bulma.min.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
1
index.js
1
index.js
@ -22,7 +22,6 @@ class App extends Find.createApp() {
|
|||||||
|
|
||||||
setMeta() {
|
setMeta() {
|
||||||
this.meta([
|
this.meta([
|
||||||
Find.css('bulma.min.css'),
|
|
||||||
Find.content('<meta name="viewport" content="width=device-width, initial-scale=1">'),
|
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('<link rel="icon" href="favicon.ico" type="image/x-icon" />')
|
Find.content('<link rel="icon" href="favicon.ico" type="image/x-icon" />')
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user