STUD I speechSynthesis

Objectiu

Fer sonar $_SESSION['resposta_session'] amb speechSynthesis en dues situacions:

  1. Quan es prem el botó “comprovar”.
  2. Quan es prem la tecla Return/Enter.

🧩 Estructura recomanada

Assumim que:

  • El botó “comprovar” envia la resposta via POST a salvar_pregunta_resposta_actual.php.
  • Després es redirigeix o recarrega index.php.

🧱 PAS 1: Afegeix el text a index.php

Al final de index.php, afegeix això:

📍 Afegeix un div ocult amb la resposta

phpCopiaModifica<?php
if (!empty($_SESSION['resposta_session'])) {
    $respostaJS = htmlspecialchars($_SESSION['resposta_session'], ENT_QUOTES);
    echo "<div id='respostaAVeure' style='display:none;'>$respostaJS</div>";
}
?>

🧱 PAS 2: Afegeix el codi JavaScript que fa sonar la resposta

També a index.php, just abans de </body>, afegeix:

htmlCopiaModifica<script>
function speak(text) {
    if ('speechSynthesis' in window) {
        const utterance = new SpeechSynthesisUtterance(text);
        speechSynthesis.cancel(); // Evita que s'encavalquin
        speechSynthesis.speak(utterance);
    } else {
        console.warn("El navegador no suporta lectura de text.");
    }
}

document.addEventListener("DOMContentLoaded", function () {
    const respostaDiv = document.getElementById("respostaAVeure");
    if (respostaDiv && respostaDiv.textContent.trim() !== "") {
        speak(respostaDiv.textContent.trim());
    }
});
</script>

Això farà que la resposta soni cada cop que es carregui index.php amb una nova $_SESSION['resposta_session'].


🧱 PAS 3: Assegura’t que s’hi arriba després de “Comprovar”

A salvar_pregunta_resposta_actual.php, assegura’t que, després de processar la resposta, s’hi estableixi la sessió i es redirigeixi a index.php. Exemple:

phpCopiaModificasession_start();
$_SESSION['resposta_session'] = $textQueVolsFerSonar;

// Després de guardar la resposta
header("Location: ../stud/index.php");
exit;

🧱 PAS 4: Captura la tecla RETURN (Enter)

A index.php, pots capturar la tecla Enter per simular el clic del botó “Comprovar”. Afegeix aquest JavaScript:

htmlCopiaModifica<script>
document.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        const boto = document.getElementById("botoComprovar");
        if (boto) boto.click();
    }
});
</script>

Assegura’t que el botó “Comprovar” tingui l’id="botoComprovar":

htmlCopiaModifica<button id="botoComprovar">Comprovar</button>

✅ Resultat final:

  • El botó “Comprovar” (o la tecla Enter) envia la resposta.
  • El servidor guarda la resposta a $_SESSION['resposta_session'].
  • index.php recull la resposta i la fa sonar amb veu automàticament.

🔒 Extra (opcional):

Si vols evitar que soni dues vegades al recarregar, pots:

  • Fer unset($_SESSION['resposta_session']) després de generar el div.
  • O afegir un flag per controlar-ho via JS o sessió.

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *

This site uses Akismet to reduce spam. Learn how your comment data is processed.