Aidube/test.html at main · ainaanraza/Aidube · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Test - Your Classroom</title>
    <meta name="description"
        content="Assess your knowledge with Aidube's AI-generated practice tests based on educational videos.">

    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="Video Test - Your Classroom">
    <meta property="og:description"
        content="Assess your knowledge with Aidube's AI-generated practice tests based on educational videos.">
    <meta property="og:image" content="aidube_logo2.png">

    <!-- Favicon -->
    <link rel="icon" href="aidube_logo2.png" type="image/png">
    <script type="module">
        import { inject } from 'https://cdn.jsdelivr.net/npm/@vercel/analytics/+esm';
        inject();
    </script>
    <!-- Google AdSense Auto Ads -->
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1717533159502136"
        crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <link rel="stylesheet" href="css/playlist.css">
    <link rel="stylesheet" href="css/toast.css">
    <style>
        .test-container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 2rem;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(59, 130, 246, 0.1);
        }

        .test-header {
            margin-bottom: 2rem;
            text-align: center;
        }

        .test-header h1 {
            color: #1e3a8a;
            margin-bottom: 0.5rem;
        }

        .test-content {
            min-height: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #4b5563;
        }

        .generate-btn {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            color: white;
            padding: 1rem 2rem;
            border: none;
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 1rem;
        }

        .generate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
        }

        .loading-spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3b82f6;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin-bottom: 1rem;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
    <script type="importmap">
    {
      "imports": {
        "@google/generative-ai": "https://esm.run/@google/generative-ai"
      }
    }
  </script>
</head>

<body>
    <header>
        <div class="header-content">
            <h1>Assessment</h1>
            <button onclick="history.back()" class="back-button">
                <i class="fas fa-arrow-left"></i> <span>Back to Video</span>
            </button>
        </div>
    </header>

    <main class="main-content" style="display: block;">
        <div class="test-container">
            <div class="test-header">
                <h1 id="testTitle">Video Assessment</h1>
                <p>Test your knowledge on this topic</p>
            </div>

            <div class="test-content" id="testContent">
                <i class="fas fa-robot fa-3x" style="color: #3b82f6; margin-bottom: 1rem;"></i>
                <h2>Ready to start?</h2>
                <p>Click the button below to generate a test using Gemini AI.</p>
                <button class="generate-btn" onclick="generateTest()">
                    <i class="fas fa-magic"></i> Generate Test
                </button>
            </div>
        </div>
    </main>

    <script type="module" src="js/test.js?v=8"></script>
</body>

</html>