Hugging Face's logo

Spaces:
Lukasusem3
/
examprep-pro
Running

App Files Community
examprep-pro / index.html
Lukasusem3's picture
Lukasusem3
Add 3 files
e81a36f verified
raw
history blame contribute delete
34 kB
 <!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ExamPrep Pro - Intelligente Prüfungsvorbereitung</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.dropzone {
border: 2px dashed #3b82f6;
transition: all 0.3s ease;
}
.dropzone.active {
border-color: #10b981;
background-color: #f0fdf4;
}
.progress-bar {
transition: width 0.5s ease;
}
.topic-cloud {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px;
}
.topic-item {
padding: 8px 16px;
border-radius: 9999px;
transition: all 0.3s ease;
}
.topic-item:hover {
transform: scale(1.1);
}
.question-card {
transition: all 0.2s ease;
}
.question-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.solution {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
.solution.open {
max-height: 500px;
}
@media (max-width: 640px) {
.topic-item {
padding: 6px 12px;
font-size: 0.875rem;
}
}
</style>
</head>
<body class="bg-gray-50 min-h-screen font-sans">
<!-- Header -->
<header class="bg-white shadow-sm">
<div class="container mx-auto px-4 py-6 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-graduation-cap text-3xl text-blue-600"></i>
<h1 class="text-2xl font-bold text-gray-800">ExamPrep Pro</h1>
</div>
<nav class="hidden md:flex space-x-6">
<a href="#" class="text-blue-600 font-medium">Startseite</a>
<a href="#" class="text-gray-600 hover:text-blue-600">Funktionen</a>
<a href="#" class="text-gray-600 hover:text-blue-600">Hilfe</a>
<a href="#" class="text-gray-600 hover:text-blue-600">Über uns</a>
</nav>
<button class="md:hidden text-gray-600">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
<!-- Hero Section -->
<section class="text-center mb-16">
<h2 class="text-4xl font-bold text-gray-800 mb-4">Intelligente Prüfungsvorbereitung</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
Analysiere vergangene Prüfungen und erhalte maßgeschneiderte Übungstests mit KI-Unterstützung.
Perfekt für Studierende und Dozierende.
</p>
<div class="flex justify-center space-x-4">
<button id="startAnalysisBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition">
Jetzt beginnen <i class="fas fa-arrow-right ml-2"></i>
</button>
<button class="border border-blue-600 text-blue-600 hover:bg-blue-50 font-medium py-3 px-6 rounded-lg transition">
Mehr erfahren
</button>
</div>
</section>
<!-- Upload Section -->
<section id="uploadSection" class="bg-white rounded-xl shadow-md p-8 mb-12 max-w-4xl mx-auto">
<div class="text-center mb-8">
<h3 class="text-2xl font-bold text-gray-800 mb-2">Prüfungen hochladen</h3>
<p class="text-gray-600">
Lade mindestens 3 Prüfungen desselben Moduls hoch (PDF bevorzugt). Je mehr Prüfungen, desto besser die Analyse.
</p>
</div>
<div id="dropzone" class="dropzone rounded-xl p-12 text-center cursor-pointer mb-6">
<div class="flex flex-col items-center justify-center">
<i class="fas fa-cloud-upload-alt text-5xl text-blue-500 mb-4"></i>
<p class="text-lg font-medium text-gray-700 mb-2">Dateien hierher ziehen und ablegen</p>
<p class="text-gray-500 mb-4">oder</p>
<label for="fileInput" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition cursor-pointer">
Dateien auswählen
</label>
<input id="fileInput" type="file" class="hidden" multiple accept=".pdf,.doc,.docx">
</div>
</div>
<div id="fileList" class="mb-6 hidden">
<h4 class="font-medium text-gray-700 mb-3">Ausgewählte Dateien:</h4>
<ul id="fileListItems" class="space-y-2"></ul>
</div>
<div class="flex justify-center">
<button id="analyzeBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-8 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed" disabled>
Analyse starten <i class="fas fa-magic ml-2"></i>
</button>
</div>
</section>
<!-- Analysis Progress Section -->
<section id="progressSection" class="bg-white rounded-xl shadow-md p-8 mb-12 max-w-4xl mx-auto hidden">
<div class="text-center mb-8">
<h3 class="text-2xl font-bold text-gray-800 mb-2">Analyse läuft</h3>
<p class="text-gray-600">
Unsere KI analysiert die hochgeladenen Prüfungen. Dies kann einige Minuten dauern.
</p>
</div>
<div class="mb-6">
<div class="flex justify-between mb-2">
<span class="text-sm font-medium text-gray-700">Fortschritt</span>
<span id="progressPercent" class="text-sm font-medium text-gray-700">0%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="progressBar" class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="bg-blue-50 p-4 rounded-lg">
<div class="flex items-center mb-2">
<div class="bg-blue-100 p-2 rounded-full mr-3">
<i class="fas fa-tags text-blue-600"></i>
</div>
<span class="font-medium text-gray-700">Themenanalyse</span>
</div>
<p id="topicStatus" class="text-sm text-gray-600">Wird vorbereitet...</p>
</div>
<div class="bg-blue-50 p-4 rounded-lg">
<div class="flex items-center mb-2">
<div class="bg-blue-100 p-2 rounded-full mr-3">
<i class="fas fa-question-circle text-blue-600"></i>
</div>
<span class="font-medium text-gray-700">Frageformate</span>
</div>
<p id="formatStatus" class="text-sm text-gray-600">Wird vorbereitet...</p>
</div>
<div class="bg-blue-50 p-4 rounded-lg">
<div class="flex items-center mb-2">
<div class="bg-blue-100 p-2 rounded-full mr-3">
<i class="fas fa-chart-line text-blue-600"></i>
</div>
<span class="font-medium text-gray-700">Schwierigkeitsgrad</span>
</div>
<p id="difficultyStatus" class="text-sm text-gray-600">Wird vorbereitet...</p>
</div>
</div>
<div class="text-center">
<p class="text-gray-500 text-sm">
<i class="fas fa-info-circle mr-1"></i> Die Analyse wird auf unseren Servern durchgeführt. Ihre Dateien werden nach der Verarbeitung automatisch gelöscht.
</p>
</div>
</section>
<!-- Results Section -->
<section id="resultsSection" class="hidden">
<div class="bg-white rounded-xl shadow-md p-8 mb-8">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
<div>
<h3 class="text-2xl font-bold text-gray-800 mb-2">Analyseergebnisse</h3>
<p class="text-gray-600">Basierend auf <span id="examCount" class="font-medium">3</span> hochgeladenen Prüfungen</p>
</div>
<button id="generateExamBtn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg transition mt-4 md:mt-0">
Übungsprüfung generieren <i class="fas fa-file-alt ml-2"></i>
</button>
</div>
<!-- Topics Cloud -->
<div class="mb-8">
<h4 class="font-bold text-gray-700 mb-4">Häufigste Themengebiete</h4>
<div class="topic-cloud mb-4">
<span class="topic-item bg-blue-100 text-blue-800 text-lg">Grundlagen (32%)</span>
<span class="topic-item bg-blue-200 text-blue-900 text-xl">Algorithmen (28%)</span>
<span class="topic-item bg-blue-300 text-blue-900 text-lg">Datenstrukturen (24%)</span>
<span class="topic-item bg-blue-100 text-blue-800">Komplexität (12%)</span>
<span class="topic-item bg-blue-100 text-blue-800">Rekursion (10%)</span>
<span class="topic-item bg-blue-50 text-blue-700 text-sm">Graphen (8%)</span>
<span class="topic-item bg-blue-50 text-blue-700 text-sm">Sortierverfahren (6%)</span>
</div>
</div>
<!-- Charts -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
<div>
<h4 class="font-bold text-gray-700 mb-4">Frageformate Verteilung</h4>
<div class="bg-gray-100 rounded-lg p-4 h-64 flex items-center justify-center">
<p class="text-gray-500">[Balkendiagramm der Frageformate]</p>
</div>
</div>
<div>
<h4 class="font-bold text-gray-700 mb-4">Schwierigkeitsgrad</h4>
<div class="bg-gray-100 rounded-lg p-4 h-64 flex items-center justify-center">
<p class="text-gray-500">[Kreisdiagramm der Schwierigkeitsgrade]</p>
</div>
</div>
</div>
<!-- Detailed Stats -->
<div>
<h4 class="font-bold text-gray-700 mb-4">Detaillierte Statistik</h4>
<div class="overflow-x-auto">
<table class="min-w-full bg-white rounded-lg overflow-hidden">
<thead class="bg-gray-100">
<tr>
<th class="py-3 px-4 text-left text-gray-700">Themengebiet</th>
<th class="py-3 px-4 text-left text-gray-700">Häufigkeit</th>
<th class="py-3 px-4 text-left text-gray-700">Durchschn. Punkte</th>
<th class="py-3 px-4 text-left text-gray-700">Frageformate</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="py-3 px-4">Algorithmen</td>
<td class="py-3 px-4">28%</td>
<td class="py-3 px-4">12/20</td>
<td class="py-3 px-4">Offen (60%), MC (30%), Berechnung (10%)</td>
</tr>
<tr>
<td class="py-3 px-4">Datenstrukturen</td>
<td class="py-3 px-4">24%</td>
<td class="py-3 px-4">15/20</td>
<td class="py-3 px-4">MC (50%), Offen (40%), Diagramm (10%)</td>
</tr>
<tr>
<td class="py-3 px-4">Grundlagen</td>
<td class="py-3 px-4">32%</td>
<td class="py-3 px-4">18/20</td>
<td class="py-3 px-4">MC (70%), Offen (30%)</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Generated Exam Section -->
<section id="generatedExamSection" class="hidden">
<div class="bg-white rounded-xl shadow-md p-8 mb-8">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
<div>
<h3 class="text-2xl font-bold text-gray-800 mb-2">Generierte Übungsprüfung</h3>
<p class="text-gray-600">Basierend auf den Analyseergebnissen</p>
</div>
<div class="flex space-x-3 mt-4 md:mt-0">
<button class="border border-blue-600 text-blue-600 hover:bg-blue-50 font-medium py-2 px-4 rounded-lg transition">
<i class="fas fa-download mr-2"></i> PDF
</button>
<button class="border border-green-600 text-green-600 hover:bg-green-50 font-medium py-2 px-4 rounded-lg transition">
<i class="fas fa-edit mr-2"></i> Anpassen
</button>
</div>
</div>
<div class="mb-6 p-4 bg-blue-50 rounded-lg">
<div class="flex items-start">
<div class="bg-blue-100 p-2 rounded-full mr-3 mt-1">
<i class="fas fa-info-circle text-blue-600"></i>
</div>
<div>
<p class="text-sm text-gray-700">
Diese Prüfung wurde von unserer KI erstellt und deckt die wichtigsten Themen ab. Sie enthält eine Mischung aus verschiedenen Fragetypen mit einem vergleichbaren Schwierigkeitsgrad wie die Originalprüfungen.
</p>
</div>
</div>
</div>
<!-- Exam Content -->
<div class="space-y-6">
<!-- Question 1 -->
<div class="question-card bg-gray-50 rounded-lg p-6">
<div class="flex justify-between items-start mb-3">
<h4 class="font-bold text-gray-800">Frage 1: Algorithmen (12 Punkte)</h4>
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Offene Frage</span>
</div>
<p class="text-gray-700 mb-4">
Erläutern Sie den Unterschied zwischen Greedy-Algorithmen und dynamischer Programmierung. Nennen Sie jeweils ein Beispiel und beschreiben Sie, wann welche Methode bevorzugt wird.
</p>
<button class="toggle-solution text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
<i class="fas fa-chevron-down mr-1"></i> Lösung anzeigen
</button>
<div class="solution mt-3 bg-white p-4 rounded-lg border border-gray-200">
<p class="text-gray-700 mb-2"><strong>Greedy-Algorithmen:</strong> Lösen Probleme in Schritten, wobei jeder Schritt die lokal optimale Wahl trifft (z.B. Kruskals Algorithmus für minimale Spannbäume).</p>
<p class="text-gray-700 mb-2"><strong>Dynamische Programmierung:</strong> Löst Teilprobleme und speichert Ergebnisse für spätere Verwendung (z.B. Fibonacci-Zahlen).</p>
<p class="text-gray-700">Greedy ist einfacher aber nicht immer optimal. DP ist rechenintensiver aber garantiert optimale Lösungen.</p>
</div>
</div>
<!-- Question 2 -->
<div class="question-card bg-gray-50 rounded-lg p-6">
<div class="flex justify-between items-start mb-3">
<h4 class="font-bold text-gray-800">Frage 2: Datenstrukturen (8 Punkte)</h4>
<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Multiple Choice</span>
</div>
<p class="text-gray-700 mb-3">
Welche der folgenden Aussagen über Hash-Tabellen sind korrekt? (Mehrere Antworten möglich)
</p>
<div class="space-y-2 mb-4">
<div class="flex items-center">
<input type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
<label class="ml-2 text-gray-700">Die durchschnittliche Zeitkomplexität für Suche ist O(1)</label>
</div>
<div class="flex items-center">
<input type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
<label class="ml-2 text-gray-700">Kollisionen können mit Verkettung oder offener Adressierung behandelt werden</label>
</div>
<div class="flex items-center">
<input type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
<label class="ml-2 text-gray-700">Die Load-Factor sollte immer unter 0.5 bleiben</label>
</div>
<div class="flex items-center">
<input type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
<label class="ml-2 text-gray-700">Perfektes Hashing garantiert O(1) Zeitkomplexität im Worst-Case</label>
</div>
</div>
<button class="toggle-solution text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
<i class="fas fa-chevron-down mr-1"></i> Lösung anzeigen
</button>
<div class="solution mt-3 bg-white p-4 rounded-lg border border-gray-200">
<p class="text-gray-700">Korrekte Antworten: 1, 2, 4. Die Load-Factor kann je nach Implementierung höher sein, typischerweise wird bei 0.7-0.8 neu gehasht.</p>
</div>
</div>
<!-- Question 3 -->
<div class="question-card bg-gray-50 rounded-lg p-6">
<div class="flex justify-between items-start mb-3">
<h4 class="font-bold text-gray-800">Frage 3: Komplexität (10 Punkte)</h4>
<span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">Berechnung</span>
</div>
<p class="text-gray-700 mb-4">
Gegeben ist folgender Algorithmus. Bestimmen Sie die Zeitkomplexität in O-Notation und begründen Sie Ihre Antwort:
<pre class="bg-gray-800 text-gray-100 p-3 rounded mt-2 overflow-x-auto">
function example(n) {
let sum = 0;
for (let i = 0; i < n; i++) {
for (let j = 0; j < i; j++) {
sum += i * j;
}
}
return sum;
}</pre>
</p>
<button class="toggle-solution text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
<i class="fas fa-chevron-down mr-1"></i> Lösung anzeigen
</button>
<div class="solution mt-3 bg-white p-4 rounded-lg border border-gray-200">
<p class="text-gray-700">Die Zeitkomplexität ist O(n²). Die äußere Schleife läuft n-mal. Die innere Schleife läuft im ersten Durchgang 0-mal, dann 1-mal, dann 2-mal usw. bis n-1-mal. Die Gesamtanzahl der Operationen ist daher 0 + 1 + 2 + ... + (n-1) = n(n-1)/2 ∈ O(n²).</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h4 class="text-lg font-bold mb-4">ExamPrep Pro</h4>
<p class="text-gray-400">
Intelligente Prüfungsvorbereitung mit KI-Unterstützung für Studierende und Dozierende.
</p>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Funktionen</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Prüfungsanalyse</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Übungstests</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Themenvisualisierung</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Schwierigkeitsgrad</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Rechtliches</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Datenschutz</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Nutzungsbedingungen</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Impressum</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Kontakt</h4>
<ul class="space-y-2">
<li class="flex items-center">
<i class="fas fa-envelope mr-2 text-gray-400"></i>
<span class="text-gray-400">[email protected]</span>
</li>
<li class="flex items-center">
<i class="fas fa-phone mr-2 text-gray-400"></i>
<span class="text-gray-400">+49 123 456789</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
<p>&copy; 2023 ExamPrep Pro. Alle Rechte vorbehalten.</p>
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
// DOM Elements
const dropzone = document.getElementById('dropzone');
const fileInput = document.getElementById('fileInput');
const fileList = document.getElementById('fileList');
const fileListItems = document.getElementById('fileListItems');
const analyzeBtn = document.getElementById('analyzeBtn');
const startAnalysisBtn = document.getElementById('startAnalysisBtn');
const uploadSection = document.getElementById('uploadSection');
const progressSection = document.getElementById('progressSection');
const resultsSection = document.getElementById('resultsSection');
const generateExamBtn = document.getElementById('generateExamBtn');
const generatedExamSection = document.getElementById('generatedExamSection');
const progressBar = document.getElementById('progressBar');
const progressPercent = document.getElementById('progressPercent');
const topicStatus = document.getElementById('topicStatus');
const formatStatus = document.getElementById('formatStatus');
const difficultyStatus = document.getElementById('difficultyStatus');
const toggleSolutionButtons = document.getElementsByClassName('toggle-solution');
// Variables
let files = [];
// Event Listeners
startAnalysisBtn.addEventListener('click', function() {
uploadSection.scrollIntoView({ behavior: 'smooth' });
});
// Drag and Drop functionality
dropzone.addEventListener('dragover', function(e) {
e.preventDefault();
this.classList.add('active');
});
dropzone.addEventListener('dragleave', function() {
this.classList.remove('active');
});
dropzone.addEventListener('drop', function(e) {
e.preventDefault();
this.classList.remove('active');
handleFiles(e.dataTransfer.files);
});
fileInput.addEventListener('change', function() {
handleFiles(this.files);
});
analyzeBtn.addEventListener('click', function() {
startAnalysis();
});
generateExamBtn.addEventListener('click', function() {
generateExam();
});
// Toggle solution visibility
for (let button of toggleSolutionButtons) {
button.addEventListener('click', function() {
const solution = this.nextElementSibling;
solution.classList.toggle('open');
const icon = this.querySelector('i');
if (solution.classList.contains('open')) {
icon.classList.remove('fa-chevron-down');
icon.classList.add('fa-chevron-up');
} else {
icon.classList.remove('fa-chevron-up');
icon.classList.add('fa-chevron-down');
}
});
}
// Functions
function handleFiles(newFiles) {
// Filter for PDFs and docs
const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
const filteredFiles = Array.from(newFiles).filter(file =>
allowedTypes.includes(file.type) || file.name.endsWith('.pdf') || file.name.endsWith('.doc') || file.name.endsWith('.docx')
);
if (filteredFiles.length < 3) {
alert('Bitte laden Sie mindestens 3 Prüfungen hoch (PDF oder Word bevorzugt).');
return;
}
files = filteredFiles;
updateFileList();
// Enable analyze button if we have at least 3 files
if (files.length >= 3) {
analyzeBtn.disabled = false;
}
}
function updateFileList() {
fileListItems.innerHTML = '';
files.forEach((file, index) => {
const listItem = document.createElement('li');
listItem.className = 'flex items-center justify-between bg-gray-100 p-3 rounded-lg';
const fileInfo = document.createElement('div');
fileInfo.className = 'flex items-center';
const icon = document.createElement('i');
if (file.type === 'application/pdf') {
icon.className = 'fas fa-file-pdf text-red-500 mr-2';
} else {
icon.className = 'fas fa-file-word text-blue-500 mr-2';
}
const fileName = document.createElement('span');
fileName.className = 'text-gray-700 truncate max-w-xs';
fileName.textContent = file.name;
const fileSize = document.createElement('span');
fileSize.className = 'text-gray-500 text-sm ml-2';
fileSize.textContent = `(${(file.size / 1024 / 1024).toFixed(2)} MB)`;
const removeBtn = document.createElement('button');
removeBtn.className = 'text-red-500 hover:text-red-700 ml-2';
removeBtn.innerHTML = '<i class="fas fa-times"></i>';
removeBtn.addEventListener('click', () => removeFile(index));
fileInfo.appendChild(icon);
fileInfo.appendChild(fileName);
fileInfo.appendChild(fileSize);
listItem.appendChild(fileInfo);
listItem.appendChild(removeBtn);
fileListItems.appendChild(listItem);
});
fileList.classList.remove('hidden');
}
function removeFile(index) {
files.splice(index, 1);
updateFileList();
if (files.length < 3) {
analyzeBtn.disabled = true;
}
}
function startAnalysis() {
uploadSection.classList.add('hidden');
progressSection.classList.remove('hidden');
progressSection.scrollIntoView({ behavior: 'smooth' });
// Simulate analysis progress
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 10;
if (progress > 100) progress = 100;
progressBar.style.width = `${progress}%`;
progressPercent.textContent = `${Math.floor(progress)}%`;
// Update status messages
if (progress > 20) {
topicStatus.textContent = "In Bearbeitung...";
}
if (progress > 45) {
formatStatus.textContent = "In Bearbeitung...";
}
if (progress > 70) {
difficultyStatus.textContent = "In Bearbeitung...";
}
if (progress === 100) {
clearInterval(interval);
setTimeout(showResults, 1000);
}
}, 500);
}
function showResults() {
progressSection.classList.add('hidden');
resultsSection.classList.remove('hidden');
resultsSection.scrollIntoView({ behavior: 'smooth' });
}
function generateExam() {
resultsSection.classList.add('hidden');
generatedExamSection.classList.remove('hidden');
generatedExamSection.scrollIntoView({ behavior: 'smooth' });
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Lukasusem3/examprep-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>