97 lines
4.5 KiB
Plaintext
97 lines
4.5 KiB
Plaintext
<h1>Welcome to Learning App</h1>
|
|
<% if (session && session.data) { %>
|
|
<p>Welcome, <%= session.data.user.username %> (<%= session.data.user.role %>)</p>
|
|
<main>
|
|
<div id="welcomeBanner" style="display: none;">Welcome!</div>
|
|
<h2>Scan the QR code to open the URL on your device</h2>
|
|
<img src="<%= qrCodeDataUrl %>" alt="QR Code">
|
|
<h2>Confirmation Code: <%= confirmationCode %></h2>
|
|
<div id="lesson">
|
|
<h2 id="lessonTitle"></h2>
|
|
<p id="lessonContent"></p>
|
|
<video id="lessonVideo" width="640" height="480" controls style="display: none;">
|
|
<source id="videoSource" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
<div id="quiz" style="display: none;">
|
|
<h2 id="quizQuestion"></h2>
|
|
<button onclick="sendQuiz()">Send Quiz</button>
|
|
</div>
|
|
<button id="nextLessonButton" style="display: none;" onclick="nextLesson()">Next Lesson</button>
|
|
</main>
|
|
<div id="badges">
|
|
<h2>Your Badges</h2>
|
|
<ul id="badgeList"></ul>
|
|
</div>
|
|
|
|
<script>
|
|
// Add a function to fetch and display badges
|
|
async function fetchBadges() {
|
|
const response = await fetch('/api/achievements');
|
|
const badges = await response.json();
|
|
const badgeList = document.getElementById('badgeList');
|
|
badgeList.innerHTML = '';
|
|
|
|
badges.forEach(badge => {
|
|
const li = document.createElement('li');
|
|
li.textContent = `${badge.badge} - Earned on ${new Date(badge.dateEarned).toLocaleDateString()}`;
|
|
badgeList.appendChild(li);
|
|
});
|
|
}
|
|
|
|
// Call fetchBadges on page load
|
|
// window.onload = fetchBadges;
|
|
</script>
|
|
|
|
|
|
<script>
|
|
const socket = new WebSocket(`wss://${window.location.hostname}`);
|
|
let currentLesson = {};
|
|
|
|
socket.onmessage = function(event) {
|
|
const message = JSON.parse(event.data);
|
|
if (message.type === 'confirm') {
|
|
displayLesson(message.content);
|
|
} else if (message.type === 'welcome') {
|
|
document.getElementById('welcomeBanner').style.display = 'block';
|
|
setTimeout(() => {
|
|
document.getElementById('welcomeBanner').style.display = 'none';
|
|
}, 2000);
|
|
} else if (message.type === 'showControls') {
|
|
document.getElementById('quiz').style.display = 'block';
|
|
} else if (message.type === 'nextLesson') {
|
|
displayLesson(message.content);
|
|
}
|
|
};
|
|
|
|
function displayLesson(lesson) {
|
|
currentLesson = lesson;
|
|
document.getElementById('lessonTitle').textContent = lesson.title;
|
|
document.getElementById('lessonContent').textContent = lesson.text;
|
|
if (lesson.video) {
|
|
const video = document.getElementById('lessonVideo');
|
|
document.getElementById('videoSource').src = `/media/${lesson.video}`;
|
|
video.load();
|
|
video.style.display = 'block';
|
|
video.onended = function() {
|
|
socket.send(JSON.stringify({ type: 'videoEnded', token: '<%= confirmationCode %>' }));
|
|
document.getElementById('nextLessonButton').style.display = 'block';
|
|
};
|
|
video.play(); // Start playing the video
|
|
}
|
|
}
|
|
|
|
function sendQuiz() {
|
|
const quiz = currentLesson.quiz;
|
|
socket.send(JSON.stringify({ type: 'quiz', question: quiz.question, choices: quiz.choices }));
|
|
}
|
|
|
|
function nextLesson() {
|
|
socket.send(JSON.stringify({ type: 'nextLesson', token: '<%= confirmationCode %>' }));
|
|
}
|
|
</script>
|
|
|
|
<% } else { %>
|
|
<p>Welcome, Guest. Please, continue to <a href="/login">login</a> or <a href="/register">register</a></p>
|
|
<% } %>
|