Spaces:

tjwrld
/

IdeaLabx-Quiz

Running

App Files Files Community

tjwrld commited on Sep 18, 2024

Commit

00972a9

verified ·

1 Parent(s): 1212160

Upload 5 files

Browse files

Files changed (5) hide show

admin.html +53 -0
landing.html +29 -0
script.js +71 -0
styles.css +40 -0
user.html +25 -0

admin.html ADDED Viewed

	@@ -0,0 +1,53 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin Panel</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Admin Panel</h1>
+        <h2>Set Quiz Timing</h2>
+        <label for="startTime">Start Time:</label>
+        <input type="time" id="startTime" required>
+        <label for="endTime">End Time:</label>
+        <input type="time" id="endTime" required>
+        <button id="setTimer">Set Timer</button>
+        <h2>Users who exited fullscreen:</h2>
+        <button id="refreshList">Refresh Exited Users</button>
+        <ul id="exitedUserList"></ul>
+    </div>
+    <script>
+        document.getElementById('setTimer').addEventListener('click', () => {
+            const startTime = document.getElementById('startTime').value;
+            const endTime = document.getElementById('endTime').value;
+            if (startTime && endTime) {
+                localStorage.setItem('startTime', startTime);
+                localStorage.setItem('endTime', endTime);
+                alert('Timer has been set!');
+            } else {
+                alert('Please set both start and end times.');
+            }
+        });
+        document.getElementById('refreshList').addEventListener('click', () => {
+            const exitedUsers = JSON.parse(localStorage.getItem('exitedUsers')) || [];
+            const exitedUserList = document.getElementById('exitedUserList');
+            exitedUserList.innerHTML = ''; // Clear the list
+            exitedUsers.forEach(user => {
+                const li = document.createElement('li');
+                li.textContent = user;
+                exitedUserList.appendChild(li);
+            });
+        });
+    </script>
+</body>
+</html>

landing.html ADDED Viewed

	@@ -0,0 +1,29 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Enter Your Name</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Welcome to the Quiz</h1>
+        <label for="nameInput">Enter Your Name:</label>
+        <input type="text" id="nameInput" placeholder="Your Name" required>
+        <button id="submitName">Start Quiz</button>
+    </div>
+    <script>
+        document.getElementById('submitName').addEventListener('click', () => {
+            const name = document.getElementById('nameInput').value.trim();
+            if (name) {
+                localStorage.setItem('userName', name);
+                window.location.href = 'user.html'; // Redirect to user page
+            } else {
+                alert('Please enter your name.');
+            }
+        });
+    </script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,71 @@

+const formIframe = document.getElementById('form-iframe');
+const formStatus = document.getElementById('formStatus');
+const currentTimeDisplay = document.getElementById('time');
+const startTimeDisplay = document.getElementById('startTimeDisplay');
+const endTimeDisplay = document.getElementById('endTimeDisplay');
+const userNameDisplay = document.getElementById('userName');
+// Display user's name
+const userName = localStorage.getItem('userName') || 'User';
+userNameDisplay.innerText = userName;
+// Function to check if the form is open based on current time
+function checkFormStatus() {
+    const startTime = localStorage.getItem('startTime');
+    const endTime = localStorage.getItem('endTime');
+    if (startTime && endTime) {
+        startTimeDisplay.innerText = startTime;
+        endTimeDisplay.innerText = endTime;
+        const now = new Date();
+        const [startHours, startMinutes] = startTime.split(':').map(Number);
+        const [endHours, endMinutes] = endTime.split(':').map(Number);
+        const startDateTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), startHours, startMinutes);
+        const endDateTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), endHours, endMinutes);
+        if (now >= startDateTime && now <= endDateTime) {
+            formStatus.innerText = 'Open';
+            formIframe.style.display = 'block'; // Show the form
+        } else {
+            formStatus.innerText = 'Closed';
+            formIframe.style.display = 'none'; // Hide the form
+        }
+    }
+}
+// Update current time display every second
+setInterval(() => {
+    const now = new Date();
+    currentTimeDisplay.innerText = now.toLocaleTimeString();
+    checkFormStatus();
+}, 1000);
+// Fullscreen functionality for the user
+const fullscreenBtn = document.getElementById('fullscreen-btn');
+if (fullscreenBtn) {
+    fullscreenBtn.addEventListener('click', () => {
+        if (!document.fullscreenElement) {
+            document.documentElement.requestFullscreen().catch(err => {
+                console.error("Error attempting to enable fullscreen mode:", err);
+            });
+        } else {
+            document.exitFullscreen();
+        }
+    });
+    // Track when the user exits fullscreen
+    document.addEventListener('fullscreenchange', () => {
+        if (!document.fullscreenElement) {
+            // User exited fullscreen
+            const exitedUsers = JSON.parse(localStorage.getItem('exitedUsers')) || [];
+            exitedUsers.push(userName);
+            localStorage.setItem('exitedUsers', JSON.stringify(exitedUsers));
+            alert('You have exited fullscreen. Your name has been recorded.');
+        }
+    });
+}
+// Initialize status check
+checkFormStatus();

styles.css ADDED Viewed

	@@ -0,0 +1,40 @@

+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 100vh;
+    margin: 0;
+    background-color: #f4f4f4;
+}
+.container {
+    text-align: center;
+    width: 100%; /* Allow the container to take full width */
+}
+h1 {
+    margin-bottom: 20px;
+}
+iframe {
+    width: 100%; /* Set to 300% */
+    max-width: none; /* Remove max-width restriction */
+    height: 450px; /* Adjust height as needed */
+    border: 1px solid #ccc;
+    margin: 0 auto; /* Center the iframe */
+    display: block; /* Ensures margin auto works */
+}
+#status, #currentTime {
+    margin-top: 20px;
+    font-size: 18px;
+}
+button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+}

user.html ADDED Viewed

	@@ -0,0 +1,25 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>User Form</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Welcome, <span id="userName">User</span>!</h1>
+        <h2>Fill Out the Form</h2>
+        <iframe id="form-iframe" src="YOUR_GOOGLE_FORM_URL" frameborder="0" allowfullscreen></iframe>
+        <div id="status">Status: <span id="formStatus">Closed</span></div>
+        <div id="currentTime">Current Time: <span id="time"></span></div>
+        <div id="quizTiming">
+            <p>Quiz Start Time: <span id="startTimeDisplay">N/A</span></p>
+            <p>Quiz End Time: <span id="endTimeDisplay">N/A</span></p>
+        </div>
+        <button id="fullscreen-btn">Go Fullscreen</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>