11import QuestionGenerator from './QuestionGenerator' ;
22import CreationHistoricalRecord from './CreationHistoricalRecord' ;
3- import { useState } from 'react' ;
43import "../../custom.css" ;
5- import React from "react" ;
4+ import React , { useState , useEffect , useCallback } from "react" ;
65import Countdown from 'react-countdown' ;
76import { useTranslation } from "react-i18next" ;
87import $ from 'jquery' ;
@@ -21,8 +20,7 @@ function QuestionView({type= "COMPETITIVE", amount=5}){
2120 const [ questions , setQuestions ] = useState ( null ) ;
2221 const [ t , i18n ] = useTranslation ( "global" ) ;
2322 const cookie = JSON . parse ( Cookies . get ( 'user' ) ?? JSON . stringify ( { username : playAsGuestUsername , token : playAsGuestToken } ) )
24- const [ audio ] = useState ( new Audio ( '/tictac.mp3' ) ) ;
25-
23+
2624
2725 const generateQuestions = async ( numQuestion ) => {
2826 if ( numQuestion < 0 ) {
@@ -56,11 +54,9 @@ function QuestionView({type= "COMPETITIVE", amount=5}){
5654 } ) ;
5755 }
5856 if ( answerGiven === correctAnswer ) {
59- audio . pause ( ) ;
6057 audioCorrect . play ( ) ; // Reproduce el sonido de respuesta incorrecta
6158 }
6259 else {
63- audio . pause ( ) ;
6460 audioIncorrect . play ( ) ; // Reproduce el sonido de respuesta correcta
6561 }
6662 $ ( this ) . css ( 'pointer-events' , 'none' ) ;
@@ -80,15 +76,17 @@ function QuestionView({type= "COMPETITIVE", amount=5}){
8076 function computePointsForQuestion ( correctAnswer , answerGiven ) {
8177 if ( answerGiven === correctAnswer ) {
8278 points += 100 ;
83- audio . pause ( ) ;
8479 } else if ( points - 50 >= 0 ) {
8580 points -= 50 ;
86- audio . pause ( ) ;
8781 } else {
8882 points = 0 ;
8983 }
9084 }
9185 function handleClick ( text ) {
86+ // Detener el síntesis de voz
87+ if ( window . speechSynthesis . speaking )
88+ window . speechSynthesis . cancel ( ) ;
89+
9290 //create the record to record the response
9391 creationHistoricalRecord . addQuestion ( questions [ numQuestion ] . getQuestion ( ) ,
9492 questions [ numQuestion ] . getAnswers ( ) ,
@@ -108,7 +106,6 @@ function QuestionView({type= "COMPETITIVE", amount=5}){
108106
109107 //Last question sends the record
110108 if ( ! ( numQuestion < questions . length - 1 ) ) {
111- audio . pause ( ) ;
112109 creationHistoricalRecord . setCompetitive ( type === 'COMPETITIVE' ) ;
113110 creationHistoricalRecord . setDate ( Date . now ( ) ) ;
114111 creationHistoricalRecord . setPoints ( points ) ;
@@ -118,41 +115,28 @@ function QuestionView({type= "COMPETITIVE", amount=5}){
118115 } , 1000 ) ;
119116
120117 }
121-
118+
122119 if ( questions === null )
123120 generateQuestions ( numQuestion )
124121
125122
126123 return (
127124 < div className = "question-view-container" >
128125 { numQuestion >= 0 ?
129- < QuestionComponent t = { t } questions = { questions } numQuestion = { numQuestion } handleClick = { handleClick } points = { points } audio = { audio } language = { i18n . language } /> :
126+ < QuestionComponent t = { t } questions = { questions } numQuestion = { numQuestion } handleClick = { handleClick } points = { points } language = { i18n . language } /> :
130127 < h1 > { t ( "questionView.no_questions_message" ) } </ h1 > }
131128 </ div > ) ;
132129}
133130
134- function QuestionComponent ( { questions, numQuestion, handleClick, t, points, audio , language} ) {
131+ function QuestionComponent ( { questions, numQuestion, handleClick, t, points, language} ) {
135132
136133
137- const speakQuestion = ( ) => {
138- const speech = new SpeechSynthesisUtterance ( ) ;
139- speech . lang = language ;
140- console . log ( language ) ;
141- getVoicesForLanguage ( language )
142- . then ( voices => {
143- // const voice = voices.find(voice => voice.lang === language);
144- // speech.voice = voice || voices[0]; // If there is no voice for the lang, choose the first one
145- window . speechSynthesis . speak ( speech ) ;
146- } )
147- . catch ( error => {
148- console . error ( "Error al obtener las voces para el idioma:" , error ) ;
149- } ) ;
150- } ;
151-
152- // Función para obtener las voces disponibles para un idioma
153- const getVoicesForLanguage = ( language ) => {
134+ // To obtain available voices for language
135+ const getVoicesForLanguage = useCallback ( ( language ) => {
154136 return new Promise ( ( resolve , reject ) => {
155137 const speech = new SpeechSynthesisUtterance ( ) ;
138+
139+ //speaks the question
156140 speech . text = questions [ numQuestion ] . getQuestion ( ) ;
157141 speech . lang = language ;
158142
@@ -166,19 +150,70 @@ function QuestionComponent({questions, numQuestion, handleClick, t, points, audi
166150
167151 window . speechSynthesis . speak ( speech ) ;
168152 } ) ;
169- } ;
153+ } , [ questions , numQuestion ] ) ;
154+
155+ const speakAnswers = useCallback ( ( answers ) => {
156+ const speech = new SpeechSynthesisUtterance ( ) ;
157+ speech . lang = language ;
158+ let concatenatedAnswers = Array . isArray ( answers ) ? answers . map ( ( answer , index ) => `${ index + 1 } ${ answer } ) . join ( ". " ) : '' ;
159+
160+ getVoicesForLanguage ( language )
161+ . then ( voices => {
162+ // const voice = voices.find(voice => voice.lang === language);
163+ // speech.voice = voice || voices[0]; // If there is no voice for the lang, choose the first one
164+ speech . text = concatenatedAnswers ;
165+ window . speechSynthesis . speak ( speech ) ;
166+ } )
167+ . catch ( error => {
168+ console . error ( "Error al obtener las voces para el idioma:" , error ) ;
169+ } ) ;
170+ } , [ getVoicesForLanguage , language ] ) ;
171+
172+ const speak = useCallback ( ( ) => {
173+ speakAnswers ( questions [ numQuestion ] . getAnswers ( ) ) ;
174+ } , [ numQuestion , questions , speakAnswers ] ) ;
175+
176+ useEffect ( ( ) => {
177+ const handleKeyPress = ( event ) => {
178+ if ( event . key === 's' ) {
179+ speak ( ) ;
180+ } else {
181+ const answerIndex = parseInt ( event . key ) - 1 ;
182+ if ( ! isNaN ( answerIndex ) && answerIndex >= 0 && answerIndex < questions [ numQuestion ] . getAnswers ( ) . length ) {
183+
184+ handleClick ( questions [ numQuestion ] . getAnswers ( ) [ answerIndex ] ) ;
185+ }
186+ }
187+ } ;
188+
189+ window . addEventListener ( "keypress" , handleKeyPress ) ;
190+
191+ return ( ) => {
192+ window . removeEventListener ( "keypress" , handleKeyPress ) ;
193+ } ;
194+ } , [ speak , numQuestion , questions , handleClick ] ) ;
195+
196+ //To stop the voice when changing of page
197+ useEffect ( ( ) => {
198+ const handleBeforeUnload = ( ) => {
199+ if ( window . speechSynthesis . speaking )
200+ window . speechSynthesis . cancel ( ) ;
201+ } ;
202+
203+ window . addEventListener ( "beforeunload" , handleBeforeUnload ) ;
204+
205+ return ( ) => {
206+ window . removeEventListener ( "beforeunload" , handleBeforeUnload ) ;
207+ } ;
208+ } , [ ] ) ;
170209
171210
172211
173212 const renderer = ( { seconds, completed } ) => {
174213 if ( completed ) {
175- audio . pause ( ) ;
176214 return < span > { t ( "questionView.end_countdown" ) } </ span > ; // Rendered when countdown completes
177215 } else {
178- if ( audio . paused ) {
179- audio . loop = true ; // Loop of tiktak
180- audio . play ( ) ;
181- }
216+
182217 return < span > { seconds } { t ( "questionView.seconds" ) } </ span > ; // Render countdown
183218 }
184219 } ;
@@ -189,7 +224,7 @@ function QuestionComponent({questions, numQuestion, handleClick, t, points, audi
189224 < div className = 'questionContainer' >
190225
191226 < div className = 'topPanel' >
192- < h2 > { questions [ numQuestion ] . getQuestion ( ) } < button className = "altavoz" onClick = { speakQuestion } > 🔊</ button > </ h2 >
227+ < h2 > { questions [ numQuestion ] . getQuestion ( ) } < button className = "altavoz" onClick = { speak } > 🔊</ button > </ h2 >
193228 < div className = "countdown" >
194229 < Countdown key = { numQuestion } date = { Date . now ( ) + 10000 } renderer = { renderer } onComplete = { handleClick . bind ( this , "no-answer" ) } />
195230 </ div >
0 commit comments