Hotspot Quiz Editor V. 1.0
© U. Schiemann Januar 2026

📖 Profi-Anleitung: Hotspot Quiz Editor 2026

Phase 1: Vorbereitung der Medien
Beginnen Sie mit dem Hochladen eines Hintergrundbildes (JPG oder PNG). Dies ist die Basis Ihres Quiz. Nutzen Sie den 📁 DATEI LADEN Button oder ziehen Sie die Datei direkt in das Browserfenster. Für die Fragen benötigen Sie Audio: Klicken Sie auf 🎤 REC zum Aufnehmen oder laden Sie eine MP3-Datei hoch.

Phase 2: Erstellung der Interaktionszonen
Geben Sie den Text der Aufgabe ein (z.B. "Klicke auf die Note H"). Wählen Sie unter 'Form' zwischen Rechteck oder Kreis. Klicken Sie nun auf das Bild und ziehen Sie den Bereich auf. Jede neue Zone wird automatisch mit dem aktuell geladenen Audio verknüpft und in der Liste unten gespeichert.

Phase 3: Feinjustierung & Kontrolle
Position: Greifen Sie einen Hotspot in der Mitte, um ihn präzise zu verschieben.
Skalierung: Nutzen Sie den gelben Griffpunkt unten rechts, um die Größe zu verändern.
Audio-Check: In der Aufgabenliste finden Sie einen ▶ START/STOPP Button. Testen Sie hier jede Aufnahme einzeln, bevor Sie exportieren.

Phase 4: Urkunde & Export
Stellen Sie die Bestehensgrenze ein (z.B. 50%). Geben Sie einen Zusatztext ein, der auf der Urkunde erscheinen soll. Klicken Sie schließlich auf ZIP EXPORTIEREN. Sie erhalten ein fertiges Paket. Die darin enthaltene index.html ist das fertige Quiz – es benötigt kein Internet und kann auf jedem Gerät gestartet werden.

📖 Professional Manual

Step 1: Media Setup
Upload a background image (JPG/PNG). This is your canvas. For audio questions, use the 🎤 REC button or upload MP3 files.

Step 2: Creating Hotspots
Enter your instruction (e.g., "Find the note H"). Select a shape (Rect/Circle) and click-drag on the image to define the target area.

Step 3: Refinement
Move hotspots by dragging the center. Resize using the yellow handle. Use the ▶ START/STOP toggle in the sidebar to verify your recordings.

Step 4: Grading & Deployment
Set the passing threshold (%). Add custom text for the PDF certificate. Click EXPORT ZIP. The resulting file works offline in any browser.

📖 Розширена інструкція

Етап 1: Підготовка медіа
Завантажте фонове зображення. Для аудіо завдань використовуйте кнопку 🎤 REC або додайте MP3-файли.

Етап 2: Створення зон
Введіть текст завдання (наприклад, "Знайди ноту H"). Виберіть форму та намалюйте область безποсередньо на фото.

Етап 3: Редагування
Переміщуйте зони, тримаючи за центр. Змінюйте розмір за жовтий кут. Перевіряйте звук кнопкою ▶ START/STOP.

Етап 4: Сертифікат та Експорт
Встановіть поріг успішності (%). Натисніть ZIP EXPORT. Отриманий файл index.html працює без інтернету.

📖 Guide Détaillé

1. Médias: Chargez l'image de fond. Enregistrez l'audio via 🎤 REC ou téléchargez un MP3.

2. Création: Saisissez la question, choisissez la forme et dessinez la zone sur l'image.

3. Ajustement: Déplacez en glissant le centre. Redimensionnez via le coin jaune. Vérifiez l'audio avec ▶ START/STOP.

4. Exportation: Réglez le seuil de réussite et exportez le ZIP. Le quiz fonctionne hors ligne.

📖 Manuale Completo

1. Media: Carica un'immagine di sfondo. Registra l'audio con 🎤 REC o carica file MP3.

2. Creazione: Inserisci il testo, scegli la forma e trascina sull'immagine per creare l'hotspot.

3. Modifica: Trascina il centro per spostare. Ridimensiona dall'angolo giallo. Controlla l'audio con ▶ START/STOP.

4. Certificato: Imposta la soglia di superamento e scarica il pacchetto ZIP.

📖 Instruções Detalhadas

1. Preparação: Carregue a imagem. Grave áudio com 🎤 REC ou use ficheiros MP3.

2. Configuração: Escreva a pergunta, escolha o formato e desenhe a área ativa na imagem.

3. Refinamento: Arraste o centro para mover. Ajuste o tamanho pelo canto inferior. Teste com ▶ START/STOP.

4. Finalização: Defina a nota mínima e exporte o ZIP para usar offline.

📖 Αναλυτικός Οδηγός

1. Προετοιμασία: Ανεβάστε εικόνα φόντου. Ηχογραφήστε με το 🎤 REC ή προσθέστε αρχεία MP3.

2. Δημιουργία: Γράψτε την ερώτηση, επιλέξτε σχήμα και σχεδιάστε την περιοχή πάνω στην εικόνα.

3. Επεξεργασία: Σύρετε από το κέντρο για μετακίνηση. Αλλάξτε μέγεθος από τη γωνία. Έλεγχος ήχου με ▶ START/STOP.

4. Εξαγωγή: Ορίστε το όριο επιτυχίας και αποθηκεύστε το αρχείο ZIP.

📖 Полное руководство

1. Подготовка: Загрузите фоновое фото. Запишите звук кнопкой 🎤 REC или загрузите MP3.

2. Создание: Введите задание, выберите форму и растяните область на экране.

3. Настройка: Перемещайте за центр. Размер меняется за желтый угол. Проверка звука через ▶ START/STOP.

4. Результат: Установите порог баллов и скачайте ZIP. Викторина работает без интернета.

📖 专业操作指南

第一阶段:媒体准备
上传背景图片(JPG/PNG)。使用 🎤 录音 按钮录制或上传 MP3 音频。

第二阶段:创建交互区
输入题目(如“点击音符 H”)。选择形状,在图片上拖动以创建热点区域。

第三阶段:调整与检查
拖动中心进行移动。拖动黄色角落调整大小。点击列表中的 ▶ 开始/停止 按钮检查音频。

第四阶段:导出
设置及格分数线。点击导出 ZIP。生成的 index.html 可离线运行。

📖 プロフェッショナルマニュアル

手順 1: メディアの準備
背景画像をアップロードします。🎤 録音 または MP3 ファイルで音声を追加してください。

手順 2: ホットスポットの作成
指示を入力し、形を選んで、画像の上で範囲をドラッグして作成します。

手順 3: 調整
中心をドラッグして移動、角でサイズを変更します。▶ 開始/停止 で音声を確認できます。

手順 4: 書き出し
合格ラインを設定し、ZIPを書き出します。オフラインで動作可能です。

📖 دليل الاستخدام الاحترافي

المرحلة 1: الوسائط
حمل صورة الخلفية. سجل الصوت عبر زر 🎤 REC أو ارفع ملفات MP3.

المرحلة 2: إنشاء المناطق
اكتب نص السؤال، اختر الشكل وارسم المنطقة النشطة على الصورة مباشرة.

المرحلة 3: الضبط
اسحب من المنتصف للتحريك، ومن الزاوية لتغيير الحجم. تحقق من الصوت عبر زر ▶ START/STOP.

المرحلة 4: التصدير
حدد نسبة النجاح وحمل ملف ZIP. سيعمل الاختبار بدون إنترنت.

📖 Panduan Lengkap

Langkah 1: Persiapan Media
Unggah gambar latar. Rekam suara dengan 🎤 REC atau unggah file MP3.

Langkah 2: Membuat Area
Masukkan instruksi, pilih bentuk, dan tarik area pada gambar.

Langkah 3: Penyesuaian
Geser bagian tengah untuk pindah. Tarik sudut kuning untuk ukuran. Cek suara dengan ▶ START/STOP.

Langkah 4: Ekspor
Atur batas kelulusan (%) dan simpan file ZIP untuk penggunaan offline.