Header text

Online Hörtest

Embed

<div id="hearing-widget-root"></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
<script>
(function(){
  // Widget-Styles scoped per ID
  const style = document.createElement('style');
  style.textContent = `
  #hearing-widget-root * { box-sizing: border-box; }
  #hearing-widget-root { font-family: system-ui,sans-serif; background: #f3f4f6; border-radius: 12px; box-shadow: 0 2px 8px #0001; padding: 1.5rem; max-width: 420px; margin: 1rem auto; }
  #hearing-widget-root h1 { font-size: 1.3rem; margin-bottom: 1rem; }
  #hearing-widget-root label { display: block; margin-top: 1rem; font-weight: 500; }
  #hearing-widget-root input, #hearing-widget-root select { width: 100%; padding: 0.5rem; margin-top: 0.25rem; border: 1px solid #ccc; border-radius: 6px; }
  #hearing-widget-root .checkbox { width: auto; margin-right: 0.5rem; }
  #hearing-widget-root .consent { font-size: 0.95rem; margin-top: 0.5rem; }
  #hearing-widget-root .btn { background: #2563eb; color: #fff; border: none; padding: 0.7rem 1.2rem; border-radius: 6px; font-size: 1rem; margin-top: 1.2rem; cursor: pointer; }
  #hearing-widget-root .btn:disabled { background: #a5b4fc; cursor: not-allowed; }
  #hearing-widget-root .success { background: #dcfce7; color: #166534; padding: 1rem; border-radius: 8px; margin-top: 1rem; }
  #hearing-widget-root .lang-switch { float: right; margin-top: -1.5rem; }
  #hearing-widget-root .lang-switch button { background: #e5e7eb; border: none; border-radius: 4px; margin-left: 0.25rem; padding: 0.25rem 0.5rem; cursor: pointer; }
  #hearing-widget-root .test-step { margin: 1.2rem 0; }
  #hearing-widget-root .test-controls { display: flex; gap: 1rem; margin-top: 1rem; }
  #hearing-widget-root .test-controls button { flex: 1; }
  #hearing-widget-root .progress { margin: 1rem 0; font-size: 0.95rem; color: #555; }
  #hearing-widget-root .audiogram-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
  #hearing-widget-root .audiogram-table th, #hearing-widget-root .audiogram-table td { border: 1px solid #ddd; padding: 0.3rem 0.5rem; text-align: center; }
  @media (max-width: 600px) { #hearing-widget-root { padding: 1rem; } }
  `;
  document.head.appendChild(style);

  // Widget-HTML
  const root = document.getElementById('hearing-widget-root');
  root.innerHTML = `
    <div class="lang-switch" id="hw-langSwitch"></div>
    <h1 id="hw-title"></h1>
    <div id="hw-app"></div>
    <canvas id="hw-audiogramCanvas" width="700" height="400" style="display:none"></canvas>
  `;

  // Übersetzungen
  const translations = {
    de: {
      title: "Digitaler Hörtest",
      startTest: "Hörtest starten",
      testIntro: "Sie hören Töne in verschiedenen Frequenzen. Bitte geben Sie an, ob Sie den Ton hören.",
      leftEar: "Linkes Ohr",
      rightEar: "Rechtes Ohr",
      frequency: "Frequenz",
      play: "Ton abspielen",
      heard: "Gehört",
      notHeard: "Nicht gehört",
      next: "Weiter",
      back: "Zurück",
      progress: "Fortschritt",
      testDone: "Hörtest abgeschlossen!",
      showForm: "Zum Lead-Formular",
      audiogram: "Ihre Hörtest-Ergebnisse",
      submit: "Absenden",
      thankYou: "Danke für Ihre Teilnahme! Ihr Ergebnis wurde gespeichert und an unser Team übermittelt.",
      deviceInfo: "Technische Infos (Browser/OS)",
      address: "Adresse",
      phone: "Telefon",
      age: "Alter",
      hearingType: "Wie hören Sie?",
      headphones: "Kopfhörer",
      airpods: "AirPods",
      speakers: "Interne Lautsprecher",
      marketing: "Ich möchte Informationen über Hörlösungen erhalten.",
      partner: "Ich bin damit einverstanden, dass meine Kontaktdaten an spezialisierte Anbieter für eine Beratung weitergeleitet werden können.",
      ki: "Ich bin damit einverstanden, dass meine anonymisierten Hörtest-Ergebnisse für die Entwicklung und das Training von KI-basierten Hörsystemen verwendet werden.",
      kiHow: "Wie funktioniert die KI? Wir nutzen moderne Künstliche Intelligenz, um die anonymen Hörtest-Ergebnisse vieler Nutzer auszuwerten. Die KI erkennt Muster und hilft, den Test laufend zu verbessern. Ihre Kontaktdaten werden dabei nicht verwendet.",
      required: "Bitte alle Pflichtfelder ausfüllen.",
      email: "E-Mail",
      firstName: "Vorname",
      lastName: "Nachname"
    },
    en: {
      title: "Digital Hearing Test",
      startTest: "Start Hearing Test",
      testIntro: "You will hear tones at different frequencies. Please indicate if you can hear the tone.",
      leftEar: "Left Ear",
      rightEar: "Right Ear",
      frequency: "Frequency",
      play: "Play Tone",
      heard: "Heard",
      notHeard: "Not heard",
      next: "Next",
      back: "Back",
      progress: "Progress",
      testDone: "Hearing test completed!",
      showForm: "Go to Lead Form",
      audiogram: "Your Hearing Test Results",
      submit: "Submit",
      thankYou: "Thank you for your participation! Your result has been saved and sent to our team.",
      deviceInfo: "Technical info (Browser/OS)",
      address: "Address",
      phone: "Phone",
      age: "Age",
      hearingType: "How do you listen?",
      headphones: "Headphones",
      airpods: "AirPods",
      speakers: "Internal speakers",
      marketing: "I want to receive information about hearing solutions.",
      partner: "I agree that my contact details may be forwarded to specialized providers for consultation.",
      ki: "I agree that my anonymized hearing test results may be used for the development and training of AI-based hearing systems.",
      kiHow: "How does the AI work? We use modern artificial intelligence to analyze the anonymous hearing test results of many users. The AI recognizes patterns and helps to continuously improve the test. Your contact details are not used.",
      required: "Please fill in all required fields.",
      email: "Email",
      firstName: "First name",
      lastName: "Last name"
    },
    fr: {
      title: "Test auditif numérique",
      startTest: "Démarrer le test auditif",
      testIntro: "Vous entendrez des sons à différentes fréquences. Veuillez indiquer si vous entendez le son.",
      leftEar: "Oreille gauche",
      rightEar: "Oreille droite",
      frequency: "Fréquence",
      play: "Jouer le son",
      heard: "Entendu",
      notHeard: "Non entendu",
      next: "Suivant",
      back: "Retour",
      progress: "Progression",
      testDone: "Test auditif terminé !",
      showForm: "Aller au formulaire",
      audiogram: "Vos résultats du test auditif",
      submit: "Envoyer",
      thankYou: "Merci pour votre participation ! Votre résultat a été enregistré et transmis à notre équipe.",
      deviceInfo: "Infos techniques (navigateur/OS)",
      address: "Adresse",
      phone: "Téléphone",
      age: "Âge",
      hearingType: "Comment écoutez-vous ?",
      headphones: "Casque",
      airpods: "AirPods",
      speakers: "Haut-parleurs internes",
      marketing: "Je souhaite recevoir des informations sur les solutions auditives.",
      partner: "J'accepte que mes coordonnées soient transmises à des prestataires spécialisés pour un conseil.",
      ki: "J'accepte que mes résultats de test auditif anonymisés soient utilisés pour le développement et l'entraînement de systèmes auditifs basés sur l'IA.",
      kiHow: "Comment fonctionne l'IA ? Nous utilisons une intelligence artificielle moderne pour analyser les résultats anonymes de nombreux utilisateurs. L'IA reconnaît des schémas et aide à améliorer continuellement le test. Vos coordonnées ne sont pas utilisées.",
      required: "Veuillez remplir tous les champs obligatoires.",
      email: "E-mail",
      firstName: "Prénom",
      lastName: "Nom"
    },
    it: {
      title: "Test dell'udito digitale",
      startTest: "Avvia test dell'udito",
      testIntro: "Sentirai suoni a diverse frequenze. Indica se senti il suono.",
      leftEar: "Orecchio sinistro",
      rightEar: "Orecchio destro",
      frequency: "Frequenza",
      play: "Riproduci suono",
      heard: "Sentito",
      notHeard: "Non sentito",
      next: "Avanti",
      back: "Indietro",
      progress: "Progresso",
      testDone: "Test dell'udito completato!",
      showForm: "Vai al modulo",
      audiogram: "I tuoi risultati del test dell'udito",
      submit: "Invia",
      thankYou: "Grazie per la tua partecipazione! Il tuo risultato è stato salvato e inviato al nostro team.",
      deviceInfo: "Info tecniche (Browser/OS)",
      address: "Indirizzo",
      phone: "Telefono",
      age: "Età",
      hearingType: "Come ascolti?",
      headphones: "Cuffie",
      airpods: "AirPods",
      speakers: "Altoparlanti interni",
      marketing: "Voglio ricevere informazioni sulle soluzioni uditive.",
      partner: "Acconsento che i miei dati di contatto possano essere inoltrati a fornitori specializzati per una consulenza.",
      ki: "Acconsento che i miei risultati anonimi del test dell'udito vengano utilizzati per lo sviluppo e l'addestramento di sistemi uditivi basati su IA.",
      kiHow: "Come funziona l'IA? Utilizziamo l'intelligenza artificiale moderna per analizzare i risultati anonimi di molti utenti. L'IA riconosce schemi e aiuta a migliorare continuamente il test. I tuoi dati di contatto non vengono utilizzati.",
      required: "Si prega di compilare tutti i campi obbligatori.",
      email: "E-mail",
      firstName: "Nome",
      lastName: "Cognome"
    }
  };
  let lang = (localStorage.getItem('htLang')||navigator.language.slice(0,2)||'de').slice(0,2);
  if(!['de','en','fr','it'].includes(lang)) lang='de';
  const t = k => translations[lang][k]||k;
  function hw$(id){return document.getElementById('hw-'+id);}
  const frequencies=[250,500,1000,2000,4000,8000];
  const ears=['left','right'];
  let testResults={},testStep=0;

  function renderLangSwitch(){
    const el=hw$('langSwitch'); el.innerHTML='';
    ['de','en','fr','it'].forEach(l=>{
      const b=document.createElement('button');
      b.textContent=l.toUpperCase(); b.disabled=l===lang;
      b.onclick=()=>{lang=l;localStorage.setItem('htLang',l);renderApp();}
      el.appendChild(b);
    });
  }

  function playTone(freq){
    const ctx=new (window.AudioContext||window.webkitAudioContext)();
    const osc=ctx.createOscillator(); osc.type='sine'; osc.frequency.value=freq;
    const gain=ctx.createGain(); gain.gain.value=0.1;
    osc.connect(gain).connect(ctx.destination); osc.start();
    setTimeout(()=>{osc.stop();ctx.close();},1200);
  }
  window.hwAnswerTest=heard=>{
    const fIndex=Math.floor(testStep/ears.length),ear=ears[testStep%ears.length],freq=frequencies[fIndex];
    testResults[ear]??={}; testResults[ear][freq]=heard; testStep++; renderTest();
  };
  function renderTest(){
    const app=hw$('app');
    if(testStep>=frequencies.length*ears.length){ renderAudiogram(); return; }
    const fIndex=Math.floor(testStep/ears.length),ear=ears[testStep%ears.length],freq=frequencies[fIndex];
    app.innerHTML=`
      <div class="test-step">
        <div><b>${t(ear==='left'?'leftEar':'rightEar')}</b></div>
        <div>${t('frequency')}: <b>${freq} Hz</b></div>
        <button class="btn" onclick="playTone(${freq})">${t('play')}</button>
        <div class="test-controls">
          <button onclick="hwAnswerTest(true)">${t('heard')}</button>
          <button onclick="hwAnswerTest(false)">${t('notHeard')}</button>
        </div>
        <div class="progress">${t('progress')}: ${testStep+1}/${frequencies.length*ears.length}</div>
      </div>`;
  }

  function renderAudiogram(){
    // Chart zeichnen (unsichtbares Canvas)
    const ctx=hw$('audiogramCanvas').getContext('2d');
    if(window._hw_audiogramChart) window._hw_audiogramChart.destroy();
    window._hw_audiogramChart = new Chart(ctx,{
      type:'line',
      data:{
        labels:frequencies.map(f=>f+' Hz'),
        datasets:[
          {label:t('leftEar'),data:frequencies.map(f=>testResults.left?.[f]?0:60),borderColor:'#2563eb',backgroundColor:'rgba(37,99,235,0.1)',tension:0.3},
          {label:t('rightEar'),data:frequencies.map(f=>testResults.right?.[f]?0:60),borderColor:'#f97316',backgroundColor:'rgba(249,115,22,0.1)',tension:0.3}
        ]
      },
      options:{
        responsive:false,
        scales:{y:{min:0,max:60,title:{display:true,text:'dB HL'}}},
        plugins:{legend:{position:'bottom'}}
      }
    });
    const app=hw$('app');
    app.innerHTML=`<p><b>${t('testDone')}</b></p>
      <button class="btn" onclick="hwRenderForm()">${t('showForm')}</button>`;
  }

  window.hwRenderForm = renderForm;
  function renderForm(){
    const app=hw$('app');
    app.innerHTML=`<form id="hw-leadForm" autocomplete="off">
      <label>${t('firstName')} *<input required name="first"></label>
      <label>${t('lastName')} *<input required name="last"></label>
      <label>${t('address')} *<input required name="addr"></label>
      <label>${t('email')} *<input type="email" required name="email"></label>
      <label>${t('phone')} *<input required name="phone"></label>
      <label>${t('age')} *<input type="number" min="18" max="100" required name="age"></label>
      <label>${t('hearingType')}
        <select name="type" required>
          <option value="headphones">${t('headphones')}</option>
          <option value="airpods">${t('airpods')}</option>
          <option value="speakers">${t('speakers')}</option>
        </select>
      </label>
      <div class="consent">
        <input type="checkbox" id="hw-m" name="m" class="checkbox">
        <label for="hw-m" style="display:inline;font-weight:400;">${t('marketing')}</label>
      </div>
      <div class="consent">
        <input type="checkbox" id="hw-p" name="p" class="checkbox">
        <label for="hw-p" style="display:inline;font-weight:400;">${t('partner')}</label>
      </div>
      <div class="consent">
        <input type="checkbox" id="hw-k" name="k" class="checkbox">
        <label for="hw-k" style="display:inline;font-weight:400;">
          ${t('ki')}<br>
          <span style="font-size:0.9em;color:#555;">${t('kiHow')}</span>
        </label>
      </div>
      <button class="btn" type="submit">${t('submit')}</button>
    </form>
    <div id="hw-successMsg" class="success" style="display:none;"><b>${t('thankYou')}</b></div>`;
    hw$('leadForm').onsubmit=handleSubmit;
  }

  async function handleSubmit(e){
    e.preventDefault(); const f=e.target, now=new Date().toISOString();
    const lead={
      first:f.first.value,last:f.last.value,address:f.addr.value,email:f.email.value,
      phone:f.phone.value,age:f.age.value,type:f.type.value,device:navigator.userAgent,
      marketing:f.m.checked,partner:f.p.checked,ki:f.k.checked,createdAt:now,testResults
    };
    // 1) PDF erzeugen
    const pdfBlob=await generatePDF(lead);
    // 2) Lead + PDF an EmailJS senden
    await sendMail(lead,pdfBlob);
    // 3) UI-Feedback
    f.style.display='none'; hw$('successMsg').style.display='';
  }

  async function generatePDF(lead){
    const {jsPDF}=window.jspdf; const doc=new jsPDF();
    doc.setFontSize(18); doc.text(t('audiogram'),14,20);
    doc.setFontSize(11);
    const L=[['Name',lead.first+' '+lead.last],['Datum',new Date(lead.createdAt).toLocaleString()],
             ['E-Mail',lead.email],['Telefon',lead.phone]];
    let y=30; L.forEach(([k,v])=>{doc.text(k+": "+v,14,y); y+=6;});
    // Chart-Bild einfügen
    const canvas=hw$('audiogramCanvas');
    const imgData=canvas.toDataURL('image/png');
    doc.addImage(imgData,'PNG',14,y,180,80); y+=90;
    // Ergebnistabelle
    doc.text("Audiogramm-Daten:",14,y); y+=6;
    frequencies.forEach(f=>{
      const l=lead.testResults.left?.[f]?'✔':'✖';
      const r=lead.testResults.right?.[f]?'✔':'✖';
      doc.text(`${f} Hz  L:${l}  R:${r}`,14,y); y+=5;
    });
    const blob=doc.output('blob');
    doc.save('hoertest.pdf');
    return blob;
  }

  // EmailJS initialisieren
  emailjs.init('KL3TK0VGwQURC3g7t');
  async function sendMail(lead,pdfBlob){
    const formData=new FormData();
    formData.append('service_id','service_i1l4pym');
    formData.append('template_id','template_joiehch');
    formData.append('user_id','KL3TK0VGwQURC3g7t');
    formData.append('template_params[first_name]',lead.first);
    formData.append('template_params[last_name]',lead.last);
    formData.append('template_params[email]',lead.email);
    formData.append('template_params[results]',JSON.stringify(lead.testResults,null,2));
    formData.append('attachments',new File([pdfBlob],'hoertest.pdf',{type:'application/pdf'}));
    try{
      await fetch('https://api.emailjs.com/api/v1.0/email/send-form',{method:'POST',body:formData});
    }catch(err){
      console.error('EmailJS Error:',err);
      alert('E-Mail konnte nicht gesendet werden.');
    }
  }

  function renderApp(){
    hw$('title').textContent=t('title'); renderLangSwitch();
    testResults={};testStep=0;
    hw$('app').innerHTML=`<p>${t('testIntro')}</p><button class="btn" onclick="hwRenderTest()">${t('startTest')}</button>`;
  }
  window.playTone=playTone;
  window.hwRenderTest=renderTest;
  renderApp();
})();
</script>

digital opua GmbH

Digital Opua ist Ihre innovative Beratungsfirma für Künstliche Intelligenz und digitale Transformation. Wir unterstützen Unternehmen dabei, das Potenzial von KI gezielt und praxisnah zu nutzen – von der ersten Idee bis zur erfolgreichen Umsetzung.

Unser Team aus erfahrenen KI-Expert:innen, Strateg:innen und Branchenkenner:innen entwickelt individuelle Lösungen, die messbaren Mehrwert schaffen. Ob Prozessautomatisierung, Datenanalyse, Machine Learning oder die Entwicklung neuer digitaler Geschäftsmodelle: Wir begleiten Sie Schritt für Schritt auf dem Weg in eine intelligente, zukunftsfähige Unternehmenswelt.

Mit Digital Opua profitieren Sie von:

fundierter KI-Expertise und praxisnaher Beratung
maßgeschneiderten Strategien für Ihre Branche und Unternehmensgröße
innovativen, aber realistisch umsetzbaren Lösungen
partnerschaftlicher Zusammenarbeit auf Augenhöhe
Unser Ziel: Wir machen Künstliche Intelligenz für Ihr Unternehmen verständlich, greifbar und gewinnbringend. Lassen Sie uns gemeinsam Ihre digitale Zukunft gestalten!