Last updated: 19 Jan 24 19:53:15 (UTC)
Link words that cycle through alternatives while playing audio
I used this on NW4T to let learners either click on or mouseover (below) difficult words to see alternatives, and to hear their pronunciation.
FOR THE CLICK VERSION (necessary for touch-screen devices):
On the start (or an early page), cache all the audio files the game will need (in a <
<<cacheaudio "pron" "audio/pronunciation.mp3">> <<cacheaudio "dete" "audio/deterioration.mp3">> <<cacheaudio "feas" "audio/feasible.mp3">>
<<cacheaudio "pron" "audio/pronunciation.mp3">>
<<cacheaudio "dete" "audio/deterioration.mp3">>
<<cacheaudio "feas" "audio/feasible.mp3">>- For each word, set a count variable at the top of the passage.
- Then put the word in a link macro, in a span that styles it “guide”.
- First click replaces the span with the alternate word/phrase, and plays the pronunciation audio. It also increases the count variable by 1.
- Second click replaces the span with the original word/phrase, and decreases the count variable by 1, essentially resetting it.
<<silently>> <<set $pronCt to 0>> <</silently>> Text, blah blah blah <<link '<span class="guide" id="pron">their pronunciation</span>'>> <<if $pronCt == 0>> <<replace '#pron'>>tell you how to say them<</replace>> <<audio 'pron' play>> <<set $pronCt += 1>> <<elseif $pronCt == 1>> <<replace '#pron'>>their pronunciation<</replace>> <<set $pronCt -= 1>> <</if>> <</link>> moar text going on…
<<silently>>
<<set $pronCt to 0>>
<</silently>>
Text, blah blah blah <<link '<span class="guide" id="pron">their pronunciation</span>'>>
<<if $pronCt == 0>>
<<replace '#pron'>>tell you how to say them<</replace>>
<<audio 'pron' play>>
<<set $pronCt += 1>>
<<elseif $pronCt == 1>>
<<replace '#pron'>>their pronunciation<</replace>>
<<set $pronCt -= 1>>
<</if>>
<</link>> moar text going on…STYLING
/* Set style for word alternate links */
.guide {
color: #AEFC64;
}
.guide:hover {
color: #d8fdb4;
text-decoration: none;
border-bottom: 1px solid #d8fdb4;
}/* Set style for word alternate links */
.guide {
color: #AEFC64;
}
.guide:hover {
color: #d8fdb4;
text-decoration: none;
border-bottom: 1px solid #d8fdb4;
}*For the mouseover, I simply used the *Mouseover Macro and the “guide” CSS style (no hover style) to change the word and play the audio:
The dining hub is always packed at dinnertime, <<mouseover>>\ <span class="guide" id="thru">thrumming</span>\ <<onmousein>> <<replace '#thru'>>buzzing<</replace>> <<audio 'thru' play>> <<onmouseout>> <<replace '#thru'>>thrumming<</replace>><</mouseover>> with conversation about the days
The dining hub is always packed at dinnertime, <<mouseover>>\
<span class="guide" id="thru">thrumming</span>\
<<onmousein>>
<<replace '#thru'>>buzzing<</replace>>
<<audio 'thru' play>>
<<onmouseout>>
<<replace '#thru'>>thrumming<</replace>><</mouseover>> with conversation about the days