fers web
This commit is contained in:
80
web/app.js
Normal file
80
web/app.js
Normal file
@@ -0,0 +1,80 @@
|
||||
const API_BASE = `${location.protocol}//${location.hostname}:8000`;
|
||||
|
||||
const app = document.getElementById('app');
|
||||
|
||||
function render(html){ app.innerHTML = html }
|
||||
|
||||
function showAgreement(){
|
||||
render(`<h2>Соглашение</h2><p>Нажмите продолжить, чтобы зарегистрироваться и пройти тест.</p><button id=agree>Продолжить</button>`);
|
||||
document.getElementById('agree').onclick = ()=> showRegister();
|
||||
}
|
||||
|
||||
function showRegister(){
|
||||
render(`<h2>Регистрация</h2>
|
||||
<form id=reg>
|
||||
<label>Имя: <input name=firstname required></label><br>
|
||||
<label>Фамилия: <input name=lastname required></label><br>
|
||||
<button type=submit>Создать пользователя</button>
|
||||
</form>
|
||||
<div id=result></div>`);
|
||||
document.getElementById('reg').onsubmit = async (e)=>{
|
||||
e.preventDefault();
|
||||
const fd = new FormData(e.target);
|
||||
const first = (fd.get('firstname') || '').trim();
|
||||
const last = (fd.get('lastname') || '').trim();
|
||||
const data = {first_name: first, last_name: last};
|
||||
const res = await fetch(`${API_BASE}/users/`, {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});
|
||||
if(!res.ok){ document.getElementById('result').innerText = 'Ошибка создания'; return }
|
||||
const user = await res.json();
|
||||
localStorage.setItem('user_id', user.id);
|
||||
showPollList();
|
||||
}
|
||||
}
|
||||
|
||||
async function showPollList(){
|
||||
const res = await fetch(`${API_BASE}/polls`);
|
||||
const polls = res.ok ? await res.json() : [];
|
||||
render(`<h2>Доступные тесты</h2><ul id=polls>${polls.map(p=>`<li><a href=#poll-${p.id}>${p.title||p.name||p.id}</a></li>`).join('')}</ul><div id=actions><button id=refresh>Обновить</button></div>`);
|
||||
document.getElementById('refresh').onclick = showPollList;
|
||||
document.querySelectorAll('#polls a').forEach(a=>a.onclick = (ev)=>{ ev.preventDefault(); const id = a.getAttribute('href').slice(6); showPoll(id); });
|
||||
}
|
||||
|
||||
async function showPoll(id){
|
||||
const res = await fetch(`${API_BASE}/polls/${id}`);
|
||||
if(!res.ok){ render('<p>Не удалось загрузить тест</p>'); return }
|
||||
const poll = await res.json();
|
||||
// simple rendering: list questions and choices (if present)
|
||||
const html = [`<h2>${poll.title||poll.name||'Тест'}</h2>`];
|
||||
poll.questions = poll.questions || [];
|
||||
html.push(`<form id=resp>`);
|
||||
poll.questions.forEach(q=>{
|
||||
html.push(`<div><strong>${q.text||q.prompt||q.id}</strong>`);
|
||||
const choices = q.choices || [];
|
||||
if(choices.length){
|
||||
choices.forEach(c=> html.push(`<div><label><input type=radio name="q_${q.id}" value="${c.id}" required> ${c.text||c.label||c.id}</label></div>`));
|
||||
} else {
|
||||
html.push(`<div><input name="q_${q.id}" placeholder="Ваш ответ"></div>`);
|
||||
}
|
||||
html.push('</div>');
|
||||
});
|
||||
html.push('<button type=submit>Отправить ответы</button></form>');
|
||||
html.push('<div id=msg></div>');
|
||||
render(html.join(''));
|
||||
document.getElementById('resp').onsubmit = async (e)=>{
|
||||
e.preventDefault();
|
||||
const form = new FormData(e.target);
|
||||
const answers = [];
|
||||
for(const [k,v] of form.entries()){
|
||||
if(!k.startsWith('q_')) continue;
|
||||
const qid = k.slice(2);
|
||||
answers.push({question_id: qid, choice_id: v});
|
||||
}
|
||||
const payload = {user_id: localStorage.getItem('user_id'), answers};
|
||||
const r = await fetch(`${API_BASE}/polls/${id}/responses`, {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
|
||||
if(!r.ok){ document.getElementById('msg').innerText = 'Ошибка отправки'; return }
|
||||
document.getElementById('msg').innerText = 'Ответы отправлены';
|
||||
}
|
||||
}
|
||||
|
||||
// start
|
||||
showAgreement();
|
||||
Reference in New Issue
Block a user