German/Find
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: German:738896650dc5fff76e1516e36526cbf239998d16
Branches Tags
German:main
..
compare: German:5d2fb7b1077cc4d2ec1dc479af25fdea925b8bdb
Branches Tags
German:main

No commits in common. "738896650dc5fff76e1516e36526cbf239998d16" and "5d2fb7b1077cc4d2ec1dc479af25fdea925b8bdb" have entirely different histories.
738896650d ... 5d2fb7b107

6 changed files with 44 additions and 304 deletions
Show Stats Expand all files Collapse all files

2
DOCS.md
View File

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

33
Find/Find.js
View File

@ -29,29 +29,8 @@ class FindObjectMap {
} }
this._app = app; this._app = app;
this._num = num; this._num = num;
this.title = undefined;
return this; 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) { select(q) {
const o = this.root.querySelector(q); const o = this.root.querySelector(q);
if (typeof o === "undefined") { if (typeof o === "undefined") {
@ -60,12 +39,6 @@ class FindObjectMap {
} }
return new FindObjectMap(o, this._app, this._num + 1); 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() { read() {
return this.root.innerHTML; return this.root.innerHTML;
} }
@ -112,7 +85,7 @@ class FindObjectMap {
} }
attach(event, func) { attach(event, func) {
this.root.addEventListener(event, () => { this.root.addEventListener(event, () => {
func(this._app, this); func(this._app);
}); });
return this; return this;
} }
@ -180,10 +153,6 @@ export default class Find {
return document.getElementById(name); return document.getElementById(name);
} }
rootId() {
return this.root.id;
}
main(el) { main(el) {
this.root = el; this.root = el;
this._map.root = el; this._map.root = el;

BIN
demos/Quiz/image.avif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

2
demos/Quiz/index.html
View File

@ -33,7 +33,7 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script src="nomodule-find.min.js"></script> <script src="nomodule-find.min.js"></script>
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>

309
demos/Quiz/index.js
View File

@ -1,35 +1,20 @@
const rootid = 'root'; const qestions = [
const questions = [
{ {
image: "image.avif", qestion: "Мой вопрос",
question: "Мой вопрос",
variants: [ variants: [
"Вариант 1", "Вариант 1",
"Вариант 2", "Вариант 2",
"Вариант 3" "Вариант 3"
], ],
correct: 0 correct: 0
},
{
question: "Мой вопрос",
variants: [
"Вариант 1",
"Вариант 2",
"Вариант 3"
],
correct: [0, 1]
} }
]; ];
class Quiz extends Find.createApp() { class Quiz extends Find.createApp() {
constructor(questions) { constructor(qestions) {
const root = Find.search(rootid); const root = Find.search('root');
super(root); super(root);
this.question_type = undefined; this.qestions = qestions;
this.questions = questions;
this.question = null;
this.correctCount = 0;
} }
init() { init() {
@ -37,12 +22,11 @@ class Quiz extends Find.createApp() {
this.setMeta(); this.setMeta();
this.setCard(); this.setCard();
this.stable(); this.stable();
this.createQuestions(); this.createQestions();
} }
setCard() { setCard() {
this.add([ this.add([
Find.content('<div id="message"></div>'),
Find.content( Find.content(
`<div class="card"> `<div class="card">
<div class="card-header"> <div class="card-header">
@ -57,7 +41,7 @@ class Quiz extends Find.createApp() {
<button <button
class="button" class="button"
style="width: 100%;" style="width: 100%;"
id="test_select" id="test"
>Проверить</button> >Проверить</button>
</div> </div>
</div>` </div>`
@ -68,274 +52,63 @@ class Quiz extends Find.createApp() {
setMeta() { setMeta() {
this.meta([ this.meta([
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>#${this.rootId()} { margin: 20px; } </style>`), Find.content('<style>body { margin: 20px; } </style>')
Find.content(
`<style>
.fit-image {
object-fit: contain;
width: 100%;
height: 100%;
}
</style>`
)
]); ]);
} }
createQuestions() { createQestions() {
this.number = 0; this.number = 0;
this.questionsWaiter(null); for (let i = 0; i < this.qestions.length; i ++) {
} this.select('qestion' + this.number);
this.setTitle();
questionsWaiter(status) { this.render();
const results = [ this.setForms(this.qestions[i]);
{ this.setEvents(this.qestions[i])
source: "no_select", .then((result) => {
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 ++; this.number ++;
} })
.catch((error) => {
let obj = undefined;
for (obj of results) { });
if (obj.source == result) break; this.number ++;
}
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>`
)
);
} }
} }
attachDeleteButton() { setEvents() {}
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 -->');
});
}
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() { setTitle() {
const isEnd = (this.questions.length === this.number); this.title('Quiz qestion ' + this.number + ' - Find.js demo');
if (!isEnd) {
this.title(`Quiz вопрос ${String(this.number + 1)}/${this.questions.length} - Find.js демо`);
} else {
this.title('Результаты!');
}
} }
setForms(isDone) { setForms(qe) {
if (isDone) {
this.viewResults();
return;
}
const que = this.question;
let input_id = 0; let input_id = 0;
const root = this.component(); const root = this.component();
const content = root.id("content"); const content = root.id("content");
const title = root.id("title"); const title = root.id("title");
title.text(que.question); title.text(qe.qestion);
for (let val in (qe.variants)) {
if (Array.isArray(que.correct)) { content.add(
this.question_type = 'checkbox'; Find.content(
} else { `<input
this.question_type = 'radio'; type="radio"
} id="variant${input_id}"
name="radiobutton">
let image = '<!-- no image -->'; <label class="radio" for="variant${input_id}">
if (typeof que.image !== "undefined") { <span class="has-text-weight-medium" id="text${input_id}"></span>
image = Find.content(
`<figure
class="fit-image"
style="margin-bottom: 20px;">
<img
src="${que.image}"
style="border-radius: 20px;"
alt="Изображение к вопросу">
</img>
</figure>`
);
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> </label>
<br />` </input>
) <br>`
); )
} else { );
content.add( content.id('text' + input_id).text(qe.variants[val]);
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 ++; input_id ++;
} }
} }
viewResults() { setEvents(r) {
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(questions); const quiz = new Quiz(qestions);
quiz.init(); quiz.init();

2
demos/Quiz/nomodule-find.min.js vendored
View File

File diff suppressed because one or more lines are too long