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.attach(/* событие */, /* функция */); // EventHandler
|
||||
map.attribute(/* Имя */, /* Значение */); // Задание атрибута
|
||||
map.add(/* HTML */);
|
||||
/*
|
||||
* Функция в attach может принимать параметр.
|
||||
* Этот параметр - обьект Find, map которого был вызван
|
||||
|
||||
34
Find/Find.js
34
Find/Find.js
@ -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
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>
|
||||
<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>
|
||||
|
||||
1
index.js
1
index.js
@ -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" />')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user