114 lines
3.0 KiB
JavaScript
114 lines
3.0 KiB
JavaScript
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(); |