Just learned about h5p. I'm trying to use it by embedding it in the scene.
I'm having trouble in making it work. All things work accordingly as per the design, but the mic doesn't pick up the voice. Hoping someone will enlighten me on how to deal with this issue or if there is a better way on how to do the same activity in hype alone.
Please note that we can only address JavaScript questions and issues in the context of Tumult Hype, so please attach a Hype document so others can dig into what you have so far.
This type of question is entirely fine to post! It is in the context of Hype.
I don't use h5p, but I see at least one major problem is that you probably need to use an iframe that has appropriate permissions for the microphone.
Instead of using an HTML Widget (embedded html iframe) and then adding the <iframe> code, what you can do is make an HTML Widget with the 'specified url' option and use the URL that was referenced in your code for that https://cms.zoni.edu/wp-admin/admin-ajax.php?action=h5p_embed&id=162.
Then in the Identity Inspector, under Additional HTML Attributes, add a key of allow and value of microphone.
Now when you preview it will in fact prompt for the mic.
Nothing seems to happen after that though ... I'm not sure if it should!
Again thank you for the quick reply.
I made the adjustment you've said but I'm still having the same issue.
The idea of this activity is, when they say the correct answer the mic picks up the word they said and it will show if its correct or not.
It is working on h5p itself but not when embedded in hype.
Hmm... If I just copy the embed code it gives and put it on an otherwise empty html webpage, I cannot get it to work. Maybe you can work with h5p support and figure out how to properly export it off their site? Once an embed works fine then I imagine it would work in a Hype context.
I actually made something that work. I have a compilation of what works in h5p.
My issue is the mic repeatedly ask for permission if it's just the html exported file I opened. I even learned how to put it in github
There's a lot of error in this project of mine, but for now this is what I'm capable.
I actually wanted to make this project without any embedding from another website, I mean to I want to make it fully in hype. But it still not possible on my current skill.
thanks for the reply! I did try to use chatGPT working on this. The problem that I face after is adding another scene that ask a different word to pronounce. Will this work on multiple scene with different words?
Thanks for the help!
Here is a revised example showing two scenes.
This is just a quick example, here are many ways of differentiating between code/scenes/elements and there are plenty of existing answers on the fora to show how to this and individualise/conditionalise code/scenes/elements
The main code looks like this now and the correct.wrong bar is a persistent symbol
// The Answers
const answers_ = ["mathematics","scientific"]
// define the correct answer counter
if (typeof hypeDocument.customData.correct == "undefined"){
hypeDocument.customData.correct = 0
}
// using the scene names as a answer index ( we minus 1 later to match against the answers array)
var curentScene_number = parseInt(hypeDocument.currentSceneName().split('_')[1])
console.log("curentScene_number:",curentScene_number)
// Check if the browser supports speech recognition
if (!('webkitSpeechRecognition' in window)) {
alert('Your browser does not support speech recognition. Try Google Chrome.');
return;
}
// get the text display and symbol timeline.
var recText_ = document.querySelector('.recText')
var displatText1_ = document.querySelector('.displatText1')
var barText1_ = document.querySelector('.barText1')
var bar_ = hypeDocument.getSymbolInstancesByName('bar')[0]
var recognition = new webkitSpeechRecognition();
recognition.lang = 'en-US'; // Set the language of the recognition
recognition.start(); // Start recognition
recognition.onresult = function(event) {
var speechResult = event.results[0][0].transcript.toLowerCase(); // Get the transcript
console.log("Recognized:", speechResult);
console.log("Answer:",answers_[curentScene_number - 1])
// compare recognised answer to array answer
recText_.innerHTML = speechResult
if (speechResult === answers_[curentScene_number - 1]) {
// add 1 to the answer counter
hypeDocument.customData.correct++
displatText1_.innerHTML = 'Correct!'
barText1_.innerHTML = hypeDocument.customData.correct + '/' + curentScene_number
bar_.goToTimeInTimelineNamed(2.06, 'answer1')
bar_.continueTimelineNamed('answer1', hypeDocument.kDirectionForward, false)
} else {
displatText1_.innerHTML = 'Wrong!'
barText1_.innerHTML = hypeDocument.customData.correct + '/' + curentScene_number
bar_.goToTimeInTimelineNamed(3.0, 'answer1')
bar_.continueTimelineNamed('answer1', hypeDocument.kDirectionForward, false)
}
// stop recognising
recognition.stop();
};
;
recognition.onerror = function(event) {
console.error('Recognition error', event.error);
alert('Error occurred in recognition: ' + event.error);
};
We also have a separate on scene reset js function.
Probably a good idea to have a look at this also, as it will help you with the code and understanding what you may need to do to work with and write it.
Please note that we can only address JavaScript questions and issues in the context of Tumult Hype, so please attach a Hype document so others can dig into what you have so far.
... I'm not sure if it should!
