340 lines
13 KiB
JavaScript
340 lines
13 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
||
//
|
||
});
|
||
|
||
const questions = [
|
||
// SECTION A: Unternehmensprofil (Q1-5) - Placeholders
|
||
{
|
||
section: "Unternehmensprofil",
|
||
question: "In welcher Branche ist Ihr Unternehmen tätig?",
|
||
type: "single",
|
||
options: ["Tech", "Handel", "Dienstleistung", "Handwerk", "Industrie", "Sonstiges"]
|
||
},
|
||
{
|
||
section: "Unternehmensprofil",
|
||
question: "Wie viele Mitarbeiter hat Ihr Unternehmen?",
|
||
type: "single",
|
||
options: ["1-10", "11-50", "51-200", "201-1000", "1000+"]
|
||
},
|
||
{
|
||
section: "Unternehmensprofil",
|
||
question: "Was ist Ihre Rolle im Unternehmen?",
|
||
type: "single",
|
||
options: ["Geschäftsführer", "Abteilungsleiter", "Mitarbeiter", "Selbstständig"]
|
||
},
|
||
{
|
||
section: "Unternehmensprofil",
|
||
question: "Wie vertraut sind Sie mit KI-Technologien?",
|
||
type: "single",
|
||
options: ["Sehr vertraut", "Etwas vertraut", "Wenig vertraut", "Gar nicht vertraut"]
|
||
},
|
||
{
|
||
section: "Unternehmensprofil",
|
||
question: "Nutzt Ihr Unternehmen bereits KI-Anwendungen?",
|
||
type: "single",
|
||
options: ["Ja, intensiv", "Ja, teilweise", "Nein, aber geplant", "Nein"]
|
||
},
|
||
|
||
// SECTION B: ZIELE & PRIORITÄTEN (Q6-10)
|
||
{
|
||
section: "Ziele & Prioritäten",
|
||
question: "Welches Ziel möchtest du in den nächsten 30 Tagen erreichen?",
|
||
type: "multiple",
|
||
options: ["mehr Leads", "mehr Umsatz", "Zeit sparen", "Prozesse automatisieren", "besseren Überblick gewinnen", "Sonstiges"]
|
||
},
|
||
{
|
||
section: "Ziele & Prioritäten",
|
||
question: "Was ist langfristig dein wichtigstes Unternehmensziel?",
|
||
type: "single",
|
||
auto_advance: true,
|
||
options: ["Wachstum", "Automatisierung", "weniger Stress", "Skalierung", "Gewinnmaximierung"]
|
||
},
|
||
{
|
||
section: "Ziele & Prioritäten",
|
||
question: "Welche Kennzahlen sind dir aktuell am wichtigsten?",
|
||
type: "multiple",
|
||
options: ["Leads", "Umsatz", "Gewinn", "Zeitersparnis", "Effizienz", "Kundenzufriedenheit"]
|
||
},
|
||
{
|
||
section: "Ziele & Prioritäten",
|
||
question: "Wie schnell erwartest du sichtbare Ergebnisse?",
|
||
type: "single",
|
||
auto_advance: true,
|
||
options: ["1–7 Tage", "7–14 Tage", "30 Tage", "egal – Hauptsache nachhaltig"]
|
||
},
|
||
{
|
||
section: "Ziele & Prioritäten",
|
||
question: "Welche deiner Aufgaben möchtest du am liebsten sofort abgeben?",
|
||
type: "multiple",
|
||
options: ["Social Media", "Backoffice", "Kundenservice", "Sales", "Terminverwaltung", "E-Mails", "Angebote", "Rechnungen"]
|
||
},
|
||
|
||
// SECTION C: ENGPASSANALYSE (Q11-15)
|
||
{
|
||
section: "Engpassanalyse",
|
||
question: "Welche Aufgabe kostet dich derzeit am meisten Zeit pro Woche?",
|
||
type: "single",
|
||
options: ["Nachrichten beantworten", "Verwaltung", "Angebote", "Content-Erstellung", "Support", "Rechnungen"]
|
||
},
|
||
{
|
||
section: "Engpassanalyse",
|
||
question: "Wo entstehen deine meisten Fehler oder Verzögerungen?",
|
||
type: "single",
|
||
options: ["Manuelle Prozesse", "Fehlende Struktur", "Kommunikation", "Tools", "Datenpflege"]
|
||
},
|
||
{
|
||
section: "Engpassanalyse",
|
||
question: "Welche Prozesse sind aktuell komplett unstrukturiert?",
|
||
type: "multiple",
|
||
options: ["Kundenanfragen", "Sales", "Onboarding", "Backoffice", "Content", "Marketing"]
|
||
},
|
||
{
|
||
section: "Engpassanalyse",
|
||
question: "Welche deiner Abläufe fühlst du als „Flaschenhals"?",
|
||
type: "textarea",
|
||
max_chars: 500
|
||
},
|
||
{
|
||
section: "Engpassanalyse",
|
||
question: "Wie viel Zeit verbringst du wöchentlich mit Admin-Aufgaben?",
|
||
type: "single",
|
||
options: ["0-5h", "6-10h", "11-15h", "16-20h", "20+ Stunden"]
|
||
},
|
||
|
||
// SECTION D: AUTOMATISIERUNGSPOTENZIALE (Q16-20)
|
||
{
|
||
section: "Automatisierungspotenziale",
|
||
question: "Welche KI-Bereiche möchtest du nutzen?",
|
||
type: "multiple",
|
||
options: ["Content-Erstellung", "Social Media", "Marketing", "Sales", "Backoffice", "Analyse"]
|
||
},
|
||
{
|
||
section: "Automatisierungspotenziale",
|
||
question: "Wie wiederkehrend sind die Aufgaben, die du automatisieren möchtest?",
|
||
type: "single",
|
||
options: ["Täglich", "Wöchentlich", "Monatlich", "Selten", "Einmalig"]
|
||
},
|
||
{
|
||
section: "Automatisierungspotenziale",
|
||
question: "Welche Software-Tools sind bei dir im Einsatz?",
|
||
type: "textarea",
|
||
placeholder: "z.B. Excel, HubSpot, Salesforce, etc.",
|
||
max_chars: 500,
|
||
},
|
||
{
|
||
section: "Automatisierungspotenziale",
|
||
question: "Wie gut sind deine Unternehmensdaten dokumentiert und zugänglich?",
|
||
type: "single",
|
||
options: ["Sehr gut", "Gut", "Mittel", "Schlecht", "Sehr schlecht"]
|
||
},
|
||
{
|
||
section: "Automatisierungspotenziale",
|
||
question: "Welches Budget hast du für die KI-Integration vorgesehen?",
|
||
type: "single",
|
||
options: ["Keins", "< 1.000€", "1.000€ - 5.000€", "5.000€ - 10.000€", "> 10.000€"]
|
||
},
|
||
|
||
// SECTION E: MINDSET & BEREITSCHAFT (Q21-25)
|
||
{
|
||
section: "Mindset & Bereitschaft",
|
||
question: "Wie offen ist dein Team für die Einführung neuer Technologien?",
|
||
type: "single",
|
||
options: ["Sehr offen", "Offen", "Neutral", "Eher skeptisch", "Ablehnend"]
|
||
},
|
||
{
|
||
section: "Mindset & Bereitschaft",
|
||
question: "Hast du interne Ressourcen (Personal, Know-how) für ein KI-Projekt?",
|
||
type: "single",
|
||
options: ["Ja, umfassend", "Ja, teilweise", "Wenig", "Nein"]
|
||
},
|
||
{
|
||
section: "Mindset & Bereitschaft",
|
||
question: "Wie wichtig ist dir die Datensicherheit bei der Nutzung von KI?",
|
||
type: "single",
|
||
options: ["Extrem wichtig", "Sehr wichtig", "Wichtig", "Weniger wichtig"]
|
||
},
|
||
{
|
||
section: "Mindset & Bereitschaft",
|
||
question: "Was ist deine größte Sorge bei der Einführung von KI?",
|
||
type: "textarea",
|
||
placeholder: "z.B. Kosten, Sicherheit, Akzeptanz im Team",
|
||
max_chars: 500,
|
||
},
|
||
{
|
||
section: "Mindset & Bereitschaft",
|
||
question: "Bist du bereit, bestehende Prozesse anzupassen, um KI effektiv zu nutzen?",
|
||
type: "single",
|
||
options: ["Ja, absolut", "Ja, wenn nötig", "Eher ungerne", "Nein"]
|
||
},
|
||
];
|
||
|
||
let currentQuestionIndex = 0;
|
||
const userAnswers = {};
|
||
|
||
function startQuestionnaire() {
|
||
document.querySelector('.welcome-screen').classList.remove('active');
|
||
document.querySelector('.question-screen').classList.add('active');
|
||
displayQuestion();
|
||
}
|
||
|
||
function displayQuestion() {
|
||
const questionData = questions[currentQuestionIndex];
|
||
const container = document.getElementById('question-container');
|
||
container.innerHTML = '';
|
||
container.classList.remove('fade-in');
|
||
void container.offsetWidth; // Trigger reflow
|
||
container.classList.add('fade-in');
|
||
|
||
// Update Section Title
|
||
document.querySelector('.section-title').textContent = `Abschnitt: ${questionData.section}`;
|
||
|
||
let content = `
|
||
<h2 class="question-title">${questionData.question}</h2>
|
||
<div class="options-container">
|
||
`;
|
||
|
||
if (questionData.type === 'single' || questionData.type === 'multiple') {
|
||
questionData.options.forEach(option => {
|
||
const isSelected = (userAnswers[currentQuestionIndex] && (questionData.type === 'single' ? userAnswers[currentQuestionIndex] === option : userAnswers[currentQuestionIndex].includes(option)));
|
||
content += `
|
||
<div
|
||
class="option ${isSelected ? 'selected' : ''}"
|
||
onclick="selectOption(this, '${option}', '${questionData.type}', ${questionData.auto_advance || false})">
|
||
${option}
|
||
</div>`;
|
||
});
|
||
} else if (questionData.type === 'textarea') {
|
||
const value = userAnswers[currentQuestionIndex] || '';
|
||
content += `<textarea class="textarea-option" maxlength="${questionData.max_chars || 500}" placeholder="${questionData.placeholder || 'Deine Antwort...'}" oninput="handleTextarea(this.value)">${value}</textarea>`;
|
||
}
|
||
content += '</div>';
|
||
container.innerHTML = content;
|
||
|
||
updateProgress();
|
||
updateNavigation();
|
||
}
|
||
|
||
function selectOption(element, option, type, autoAdvance) {
|
||
if (type === 'single') {
|
||
userAnswers[currentQuestionIndex] = option;
|
||
// visual selection is handled in the next displayQuestion call
|
||
if (autoAdvance) {
|
||
setTimeout(nextQuestion, 300);
|
||
}
|
||
} else { // multiple
|
||
if (!userAnswers[currentQuestionIndex]) {
|
||
userAnswers[currentQuestionIndex] = [];
|
||
}
|
||
const index = userAnswers[currentQuestionIndex].indexOf(option);
|
||
if (index > -1) {
|
||
userAnswers[currentQuestionIndex].splice(index, 1);
|
||
} else {
|
||
userAnswers[currentQuestionIndex].push(option);
|
||
}
|
||
}
|
||
displayQuestion(); // Re-render to show selection state
|
||
}
|
||
|
||
|
||
function handleTextarea(value) {
|
||
userAnswers[currentQuestionIndex] = value;
|
||
}
|
||
|
||
function nextQuestion() {
|
||
if (currentQuestionIndex < questions.length - 1) {
|
||
currentQuestionIndex++;
|
||
displayQuestion();
|
||
} else {
|
||
showCompletionScreen();
|
||
}
|
||
}
|
||
|
||
function prevQuestion() {
|
||
if (currentQuestionIndex > 0) {
|
||
currentQuestionIndex--;
|
||
displayQuestion();
|
||
}
|
||
}
|
||
|
||
function updateProgress() {
|
||
const progress = (currentQuestionIndex / questions.length) * 100;
|
||
document.querySelector('.progress-bar').style.width = `${progress}%`;
|
||
document.querySelector('.progress-text').textContent = `Frage ${currentQuestionIndex + 1} / ${questions.length}`;
|
||
}
|
||
|
||
function updateNavigation() {
|
||
document.querySelector('.btn-prev').style.display = currentQuestionIndex > 0 ? 'inline-flex' : 'none';
|
||
const nextButton = document.querySelector('.btn-next');
|
||
if (currentQuestionIndex === questions.length - 1) {
|
||
nextButton.textContent = 'Abschliessen ›';
|
||
} else {
|
||
nextButton.textContent = 'Weiter →';
|
||
}
|
||
}
|
||
|
||
function showCompletionScreen() {
|
||
document.querySelector('.question-screen').classList.remove('active');
|
||
const completionContainer = document.querySelector('.completion-screen');
|
||
completionContainer.classList.add('active');
|
||
|
||
completionContainer.innerHTML = `
|
||
<div class="email-capture-content fade-in">
|
||
<div class="welcome-badge">LETZTER SCHRITT</div>
|
||
<h1 class="welcome-title"> <span class="gradient-text">Report</span> anfordern</h1>
|
||
<p class="welcome-description">
|
||
Fast geschafft! Geben Sie Ihre E-Mail-Adresse ein, um Ihren personalisierten KI-Fahrplan sofort zu erhalten.
|
||
</p>
|
||
<form id="email-form" onsubmit="submitQuestionnaire(event)">
|
||
<input type="email" id="email-input" placeholder="deine.email@beispiel.com" required>
|
||
<div class="consent-container">
|
||
<input type="checkbox" id="consent-checkbox" required>
|
||
<label for="consent-checkbox">
|
||
Ich stimme der Verarbeitung meiner Daten gemäß der <a href="/datenschutz" target="_blank">Datenschutzerklärung</a> zu und möchte den Report per E-Mail erhalten.
|
||
</label>
|
||
</div>
|
||
<button type="submit" class="btn-start">Report jetzt anfordern →</button>
|
||
</form>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function submitQuestionnaire(event) {
|
||
event.preventDefault();
|
||
const email = document.getElementById('email-input').value;
|
||
const consent = document.getElementById('consent-checkbox').checked;
|
||
|
||
if (!consent) {
|
||
alert("Bitte stimmen Sie der Datenverarbeitung zu.");
|
||
return;
|
||
}
|
||
|
||
console.log("Email:", email);
|
||
console.log("Answers:", userAnswers);
|
||
|
||
// Show thank you message
|
||
const completionContainer = document.querySelector('.completion-screen');
|
||
completionContainer.innerHTML = `
|
||
<div class="thank-you-content fade-in">
|
||
<div class="welcome-badge">VIELEN DANK</div>
|
||
<h1 class="welcome-title">Ihr <span class="gradient-text">KI-Report</span> ist unterwegs!</h1>
|
||
<p class="welcome-description">
|
||
Wir haben mit der Analyse begonnen. Ihr personalisierter Fahrplan zur Automatisierung wird in wenigen Minuten in Ihrem Posteingang sein.
|
||
</p>
|
||
<div class="welcome-benefits">
|
||
<div class="benefit-item">
|
||
<span class="benefit-icon">✓</span>
|
||
<span>Analyse gestartet</span>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<span class="benefit-icon">📫</span>
|
||
<span>E-Mail versandt</span>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<span class="benefit-icon">🚀</span>
|
||
<span>Automatisierung wartet</span>
|
||
</div>
|
||
</div>
|
||
<a href="/" class="btn-start">Zurück zur Startseite</a>
|
||
</div>
|
||
`;
|
||
}
|