164 lines
12 KiB
PHP
164 lines
12 KiB
PHP
<?php
|
||
$sections = [
|
||
"UNTERNEHMEN & ZIELE" => [
|
||
1 => ['type' => 'single', 'text' => 'Wie groß ist dein Unternehmen?', 'options' => ['👤 1 Person', '👥 2–5 Mitarbeiter', '👨👩👧👦 6–20 Mitarbeiter', '🏢 21–50 Mitarbeiter', '🏭 50+ Mitarbeiter'], 'auto-advance' => true],
|
||
2 => ['type' => 'text', 'text' => 'In welcher Branche bist du tätig?', 'placeholder' => 'z.B. Marketing, E-Commerce, Beratung, Handwerk, Immobilien, Gesundheitswesen', 'maxLength' => 100],
|
||
3 => ['type' => 'multiple', 'text' => 'Welches Geschäftsmodell nutzt du? (Mehrfachauswahl)', 'options' => ['💼 Dienstleistung', '🛒 Handel', '💡 Coaching / Beratung', '📢 Agentur', '🖥️ E-Commerce', '📋 Sonstiges']],
|
||
4 => ['type' => 'single', 'text' => 'Was ist dein wichtigstes Ziel in den nächsten 3 Monaten?', 'options' => ['📈 Mehr Leads generieren', '💰 Umsatz steigern', '⏱️ Zeit sparen durch Automatisierung', '📊 Besseren Überblick über Prozesse', '🚀 Skalierung vorbereiten'], 'auto-advance' => true],
|
||
5 => ['type' => 'scale', 'text' => 'Wie digital sind deine aktuellen Abläufe?', 'min' => 1, 'max' => 5, 'labels' => ['Sehr gering (meist analog/manuell)', 'Sehr hoch (vollständig digital)'], 'auto-advance' => true],
|
||
],
|
||
"ENGPÄSSE & AUTOMATISIERUNG" => [
|
||
6 => ['type' => 'multiple', 'text' => 'Welche Aufgaben kosten dich am meisten Zeit? (Mehrfachauswahl)', 'options' => ['📧 E-Mails & Nachrichten beantworten', '📅 Terminverwaltung', '📝 Angebote & Rechnungen erstellen', '📱 Social Media & Content', '🤝 Kundenanfragen bearbeiten', '📊 Verwaltung & Backoffice', '📄 Dokumentation']],
|
||
7 => ['type' => 'textarea', 'text' => 'Beschreibe deinen größten "Flaschenhals" im Tagesgeschäft:', 'placeholder' => 'z.B. Ich verliere täglich 3 Stunden mit manueller Dateneingabe in verschiedene Systeme. Kundenanfragen kommen über 5 Kanäle und ich verliere den Überblick.', 'maxLength' => 300, 'hint' => 'Tipp: Drücken Sie Strg+Enter für schnelle Eingabe'],
|
||
8 => ['type' => 'single', 'text' => 'Wie viel Zeit verbringst du pro Woche mit Admin-Aufgaben?', 'options' => ['⏱️ 0-5 Stunden', '⏰ 6-10 Stunden', '🕐 11-15 Stunden', '🕑 16-20 Stunden', '🕒 Über 20 Stunden'], 'auto-advance' => true],
|
||
9 => ['type' => 'multiple', 'text' => 'Welche Bereiche möchtest du automatisieren? (Mehrfachauswahl)', 'options' => ['🤖 Kundenservice (Chatbot, FAQ)', '📧 E-Mail-Marketing & Follow-ups', '📱 Social Media Posting', '📊 Leadqualifizierung & CRM', '📄 Dokumentenerstellung', '📅 Terminbuchung', '💰 Rechnungen & Buchhaltung', '📈 Datenanalyse & Reporting']],
|
||
10 => ['type' => 'single', 'text' => 'Wie viel Zeit möchtest du pro Woche durch KI einsparen?', 'options' => ['⏱️ 2–5 Stunden', '⏰ 6–10 Stunden', '🕐 11–15 Stunden', '🕑 16–20 Stunden', '🚀 Mehr als 20 Stunden'], 'auto-advance' => true],
|
||
],
|
||
"BEREITSCHAFT & UMSETZUNG" => [
|
||
11 => ['type' => 'multiple', 'text' => 'Welche KI-Tools nutzt du bereits? (Mehrfachauswahl)', 'options' => ['ChatGPT', 'Google Gemini', 'Claude', 'Midjourney / Bildgeneratoren', 'Automatisierungstools (Zapier, Make)', '❌ Noch keine KI-Tools']],
|
||
12 => ['type' => 'scale', 'text' => 'Wie offen bist du für neue Technologien?', 'min' => 1, 'max' => 5, 'labels' => ['Sehr skeptisch', 'Sehr aufgeschlossen & experimentierfreudig'], 'auto-advance' => true],
|
||
13 => ['type' => 'single', 'text' => 'Wie schnell möchtest du mit KI-Automatisierung starten?', 'options' => ['🚀 Sofort (innerhalb 1 Woche)', '⚡ Sehr bald (1-2 Wochen)', '📅 Innerhalb 1 Monat', '🗓️ In 1-3 Monaten', '💭 Erstmal nur informieren'], 'auto-advance' => true],
|
||
14 => ['type' => 'multiple', 'text' => 'Was hält dich aktuell von KI ab? (Mehrfachauswahl)', 'options' => ['🤔 Zu kompliziert / fehlendes Know-how', '💰 Unklare Kosten', '⏰ Keine Zeit für Implementierung', '🔒 Datenschutz-Bedenken', '🎯 Weiß nicht, wo ich anfangen soll', '✅ Nichts, ich bin bereit!']],
|
||
15 => ['type' => 'single', 'text' => 'Wie fühlst du dich gerade?', 'options' => ['😰 Überfordert mit allem', '😐 Neutral / Abwartend', '😊 Motiviert, etwas zu ändern', '🚀 Sehr motiviert & bereit loszulegen'], 'auto-advance' => true],
|
||
]
|
||
];
|
||
$total_questions = 17;
|
||
?>
|
||
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>KI-Fit Check</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Space+Grotesk:wght@700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="assets/css/questionnaire.css?v=<?php echo time(); ?>">
|
||
</head>
|
||
<body>
|
||
<div class="questionnaire-container">
|
||
<!-- Progress Bar -->
|
||
<div class="progress-container">
|
||
<div class="progress-bar" id="progressBar"></div>
|
||
<div class="progress-text"><span id="progressText">0</span>/15</div>
|
||
</div>
|
||
|
||
<!-- Welcome Screen -->
|
||
<div class="screen welcome-screen active" id="welcome-screen">
|
||
<div class="welcome-content">
|
||
<div class="welcome-badge">KI-FIT CHECK</div>
|
||
<h1 class="welcome-title">Ihre <span class="gradient-text">3-Minuten</span> KI-Analyse</h1>
|
||
<p class="welcome-description">Beantworten Sie 15 kurze Fragen zu Ihrem Unternehmen. Unsere KI analysiert Ihre Antworten und erstellt einen personalisierten Fahrplan zur Automatisierung.</p>
|
||
<div class="welcome-benefits">
|
||
<div class="benefit-item"><span class="benefit-icon">✓</span> <span>100% kostenlos</span></div>
|
||
<div class="benefit-item"><span class="benefit-icon">⏱️</span> <span>Nur 3 Minuten</span></div>
|
||
<div class="benefit-item"><span class="benefit-icon">📊</span> <span>Sofortiger Report</span></div>
|
||
</div>
|
||
<button class="btn-start" onclick="startQuestionnaire()">Jetzt starten →</button>
|
||
<p class="welcome-note">Ihre Daten werden vertraulich behandelt und DSGVO-konform verarbeitet.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Question Screens -->
|
||
<form id="questionnaire-form" action="submit.php" method="POST">
|
||
<?php
|
||
$q_number = 1;
|
||
foreach ($sections as $section_title => $questions) {
|
||
echo "<div class='screen-group'>";
|
||
echo "<h2 class='section-title'>{$section_title}</h2>";
|
||
foreach ($questions as $id => $q) {
|
||
echo "<div class='screen question-screen' id='question-{$q_number}' data-question-id='{$q_number}'>";
|
||
echo "<h3>{$q['text']}</h3>";
|
||
echo "<div class='options-container'>";
|
||
|
||
switch ($q['type']) {
|
||
case 'single':
|
||
case 'multiple':
|
||
$inputType = $q['type'] == 'single' ? 'radio' : 'checkbox';
|
||
foreach ($q['options'] as $option) {
|
||
echo "<label class='option-label'>";
|
||
echo "<input type='{$inputType}' name='q{$q_number}[]' value='{$option}' " . (($q['auto-advance'] ?? false) ? "class='auto-advance'" : "") . ">";
|
||
echo "<span>{$option}</span>";
|
||
echo "</label>";
|
||
}
|
||
break;
|
||
case 'text':
|
||
echo "<input type='text' name='q{$q_number}' placeholder='{$q['placeholder']}' maxlength='{$q['maxLength']}'>";
|
||
break;
|
||
case 'textarea':
|
||
echo "<textarea name='q{$q_number}' placeholder='{$q['placeholder']}' maxlength='{$q['maxLength']}'></textarea>";
|
||
if (isset($q['hint'])) {
|
||
echo "<p class='hint'>{$q['hint']}</p>";
|
||
}
|
||
break;
|
||
case 'scale':
|
||
echo "<div class='scale-container'>";
|
||
echo "<span>{$q['labels'][0]}</span>";
|
||
for ($i = $q['min']; $i <= $q['max']; $i++) {
|
||
echo "<label class='scale-label'>";
|
||
echo "<input type='radio' name='q{$q_number}' value='{$i}' " . (($q['auto-advance'] ?? false) ? "class='auto-advance'" : "") . ">";
|
||
echo "<span>{$i}</span>";
|
||
echo "</label>";
|
||
}
|
||
echo "<span>{$q['labels'][1]}</span>";
|
||
echo "</div>";
|
||
break;
|
||
}
|
||
|
||
echo "</div>"; // .options-container
|
||
echo "<div class='navigation-buttons'>";
|
||
if ($q_number > 1) {
|
||
echo "<button type='button' class='btn-prev' onclick='navigate(-1)'>Zurück</button>";
|
||
}
|
||
// Show 'Weiter' button only if it's not an auto-advancing single choice question
|
||
if (!($q['type'] == 'single' && ($q['auto-advance'] ?? false))) {
|
||
echo "<button type='button' class='btn-next' onclick='navigate(1)'>Weiter</button>";
|
||
}
|
||
|
||
echo "</div>"; // .navigation-buttons
|
||
echo "</div>"; // .question-screen
|
||
$q_number++;
|
||
}
|
||
echo "</div>"; // .screen-group
|
||
}
|
||
?>
|
||
|
||
<!-- Email Capture Screen (Step 16) -->
|
||
<div class="screen" id="email-screen" data-question-id="16">
|
||
<h2 class="section-title">Fast geschafft!</h2>
|
||
<h3>Geben Sie Ihre E-Mail-Adresse ein, um Ihren personalisierten Report zu erhalten.</h3>
|
||
<div class="options-container">
|
||
<input type="email" name="email" id="email-input" placeholder="z.B. max.mustermann@mail.com" required>
|
||
</div>
|
||
<div class="navigation-buttons">
|
||
<button type="button" class="btn-prev" onclick="navigate(-1)">Zurück</button>
|
||
<button type="button" class="btn-next" onclick="navigate(1)">Weiter</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Consent Screen (Step 17) -->
|
||
<div class="screen" id="consent-screen" data-question-id="17">
|
||
<h2 class="section-title">Letzter Schritt</h2>
|
||
<h3>Einverständnis</h3>
|
||
<div class="options-container">
|
||
<label class="option-label consent-label">
|
||
<input type="checkbox" name="consent" id="consent-checkbox" required>
|
||
<span>Ich stimme der Verarbeitung meiner Daten gemäß der <a href="/privacy" target="_blank">Datenschutzerklärung</a> zu und möchte den Report per E-Mail erhalten. Die Einwilligung kann jederzeit widerrufen werden.</span>
|
||
</label>
|
||
</div>
|
||
<div class="navigation-buttons">
|
||
<button type="button" class="btn-prev" onclick="navigate(-1)">Zurück</button>
|
||
<button type="submit" class="btn-submit">Absenden & Report erhalten →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Thank You Screen -->
|
||
<div class="screen" id="thank-you-screen">
|
||
<h2>Vielen Dank!</h2>
|
||
<p>Ihr personalisierter KI-Fahrplan wird jetzt erstellt und Ihnen in Kürze per E-Mail zugesendet.</p>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<script src="assets/js/questionnaire.js?v=<?php echo time(); ?>"></script>
|
||
</body>
|
||
</html>
|