Quiz example

This commit is contained in:
german 2026-04-12 16:02:56 +04:00
parent b952b6bc86
commit 5d2fb7b107
8 changed files with 190 additions and 6 deletions

View File

@ -145,6 +145,7 @@ map.id(/* ID элемента */); // Вернет экземпляр map для
map.tag(/* TAG элемента */); // Вернет экземпляр map для выбранного элемента
map.attach(/* событие */, /* функция */); // EventHandler
map.attribute(/* Имя */, /* Значение */); // Задание атрибута
map.add(/* HTML */);
/*
* Функция в attach может принимать параметр.
* Этот параметр - обьект Find, map которого был вызван

View File

@ -56,6 +56,10 @@ class FindObjectMap {
this.root.innerHTML = t;
return this;
}
add(h) {
const t = this.html();
return this.html(t + String(h));
}
value(t) {
if (arguments.length == 0) {
return this.root.value;
@ -116,6 +120,7 @@ export default class Find {
/* Public section */
constructor(root) {
this._lll = "";
this.root = root;
this.iter = 0;
this.groups = new Array();
@ -366,7 +371,14 @@ export default class Find {
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") {
PrivateFind.error("Use select, before draw. Or you can use render.");
}
@ -379,8 +391,8 @@ export default class Find {
PrivateFind.findTypeError(group.html, "object");
return this;
}
this.root.innerHTML = "";
if (!(typeof __use === "string" && __use === '__undstta')) {
const isRecursive = (typeof __use === "string" && __use === '__undstta');
if (!isRecursive) {
for (let i = 0; i < this.groups.length; i ++) {
if (typeof this.groups[i].every === "boolean" && this.groups[i].every) {
this.render(this.groups[i].id, '__undstta');
@ -396,15 +408,27 @@ export default class Find {
Array.isArray(group.meta) &&
group.meta.length > 0 && this.iter === 0
) {
let n = document.head.innerHTML;
for (let i = 0; i < group.meta.length; i ++) {
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 ++) {
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 ++;

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
View 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
View 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

File diff suppressed because one or more lines are too long

View File

@ -29,6 +29,7 @@
<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>

View File

@ -22,7 +22,6 @@ class App extends Find.createApp() {
setMeta() {
this.meta([
Find.css('bulma.min.css'),
Find.content('<meta name="viewport" content="width=device-width, initial-scale=1">'),
Find.content('<style>body { margin: 20px; } </style>'),
Find.content('<link rel="icon" href="favicon.ico" type="image/x-icon" />')