node-ejs-renderer/views/mobile.ejs

    <header>
        <h1>Mobile Learning View</h1>
    </header>
    <main>
        <div id="welcomeBanner" style="display: none;">Welcome! Remember to Login before starting a learning session.</div>
        <h2>Enter the confirmation code</h2>
        <form id="confirmForm">
            <input type="text" id="confirmationCode" value="<%= confirmationCode %>" placeholder="Enter code here" required>
            <button type="submit">Submit</button>
        </form>
        <div id="content" style="display: none;">
            <h2 id="lessonTitle"></h2>
            <p id="lessonContent"></p>
            <div id="learningContent">
                <h2>Learning Content</h2>
                <p id="contentText"></p>
            </div>
            <button onclick="fetchContent()">Get Learning Content</button>
            
            <script>
                async function fetchContent() {
                    const prompt = "Explain the importance of the French Revolution.";
                    const response = await fetch('/api/learning-content', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ prompt })
                    });
                    const data = await response.json();
                    document.getElementById('contentText').textContent = data.content;
                }
            </script>
            
            <div id="scrollingText" style="display: none;">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <form id="quizForm" style="display: none;">
                <h3 id="quizQuestion"></h3>
                <input type="text" id="quizInput" placeholder="Your answer">
                <button type="submit">Submit Answer</button>
            </form>
            <div id="choices" style="display: none;">
                <button onclick="submitChoice('A')">A</button>
                <button onclick="submitChoice('B')">B</button>
                <button onclick="submitChoice('C')">C</button>
                <button onclick="submitChoice('D')">D</button>
            </div>
            <button id="nextLessonButton" style="display: none;" onclick="nextLesson()">Next Lesson</button>
        </div>
        <audio id="answerSound" src="/audio/answer.mp3" preload="auto"></audio>
    </main>
    <script>
        const socket = new WebSocket(`wss://${window.location.hostname}`);
        let currentLesson = {};

        document.getElementById('confirmForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const confirmationCode = document.getElementById('confirmationCode').value;
            socket.send(JSON.stringify({ type: 'confirm', code: confirmationCode }));
        });

        socket.onmessage = function(event) {
            const message = JSON.parse(event.data);
            if (message.type === 'confirmation') {
                sessionToken = message.token;
                document.getElementById('confirmForm').style.display = 'none';
                document.getElementById('content').style.display = 'block';
                updateContent(message.content);
            } else if (message.type === 'updateContent') {
                updateContent(message.content);
            } else if (message.type === 'quiz') {
                document.getElementById('quizForm').style.display = 'block';
                document.getElementById('quizQuestion').textContent = message.question;
            } else if (message.type === 'choices') {
                document.getElementById('choices').style.display = 'block';
            } 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('choices').style.display = 'block';
            } else if (message.type === 'nextLesson') {
                updateContent(message.content);
            }
        };

        document.getElementById('quizForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const answer = document.getElementById('quizInput').value;
            socket.send(JSON.stringify({ type: 'quizAnswer', token: sessionToken, answer: answer }));
            playAnswerSound();
        });

        function submitChoice(choice) {
            socket.send(JSON.stringify({ type: 'choice', token: sessionToken, choice: choice }));
            playAnswerSound();
        }

        function updateContent(content) {
            currentLesson = content;
            document.getElementById('lessonTitle').textContent = content.title;
            document.getElementById('lessonContent').textContent = content.text;
            document.getElementById('scrollingText').style.display = 'block';
        }

        function playAnswerSound() {
            const audio = document.getElementById('answerSound');
            audio.play();
        }

        function nextLesson() {
            socket.send(JSON.stringify({ type: 'nextLesson', token: sessionToken }));
        }
    </script>