Thank you so much. I had time to use and try your widget and it works exactly as intended. But upon usage, I encountered problem: I need to call widget on several sentences/highlight. I did so by leaving passage and reentering with new arguments. But this messes up my timer (as it begins counting on passage load). So I tried to adapt your widget to run through array of sentences and also store text to be highlighted in the very sentence.
I have e.g. the following in my StoryInit:
<<set $sentences = ["As early as 1835, -Ada Lovelace* developed the first complex program for a mechanical calculating machine.",
"In 1882 -Maria Beasley* revolutionized seafaring by inventing the lifeboat.", "Without them we would have drunk our coffee very differently for decades: -Melitta Bentz* invented the coffee filter in 1908.", "-Marie Curie* discovered the two radioactive elements polonium and radium and has won two Nobel Prizes.", "An adjustable central gas heating system that was later used to heat thousands of public buildings and households was invented in 1919 by -Alice H. Parker*.", "-Gertrude Belle Elion* received the Nobel Prize in Medicine for her research in the field of chemotherapy and the invention of the drug mercaptopurine.", "It was only with her program that the first moon landing was possible: -Margaret Hamilton* was a senior software engineer at NASA.", "Many know -Hedy Lamarr* as an actress, but it was her invention of frequency hopping that made technologies such as WiFi and GPS possible in the first place.", "The Polish scientist -Stephanie Kwolek* invented the synthetic fiber Kevlar, which is five times stronger than steel.", "-Maria Telkes* has done significant research in the field of solar energy.", "The Egyptian ruler - Cleopatra* rose to be ruler of the Orient alongside Caesar and Marc Anthony.", "-Jeanne d’Arc* led the soldiers against the English in the Hundred Years War.", "-Catharina the Second* ousted her husband from the throne and had herself proclaimed Russian Tsarina.", "-Rosa Luxemburg *was the founder of the Spartakusbund and the Communist Party and tried to bring about the end of the First World War with mass strikes.", "-Ayn Rand* was born in Russia and is the founder of objectivism.", "-Simone de Beauvoir* had an important influence on feminism and existentialism.", "One of the most important philosophers of the 20th century is -Hannah Arendt*, who has dealt with totalitarianism, among other things."]>>
<<set $sentenceCount to $sentences.length>>
<<set $highlightCounter to 0>>
<<set $correctHighlighted to 0>>
<<set $selectedSentences to []>>
<<for _i to 0; _i lt 8; _i++>>
<<set $selectedSentences.push($sentences.pluck())>>
<</for>>
("-" and “*” before and after names are to later separate fragment to be highlighted.)
Then I added some lines in front of your widget to fetch data from array, separate fragment and do the rest:
<<widget "checkHighlighted">>
<<set _sentence to "">>
<<set _correctHighlight to "">>
<<if $selectedSentences.length gt 0>>
<<set _currentSentence to $selectedSentences.pluck()>>
<<set _fullSentence to _currentSentence.replace("-", "").replace("*", "")>>
<<set _mark to _currentSentence.split('-').pop().split('*')[0]>>
<<else>>
<<goto "levelFinished">>
<</if>>
<<silently>>
<<set _sentence to _fullSentence>>
<<set _correctHighlight to _mark>>
<<set _highlightId to 'highlightHere'>>
<<set $selection to ''>>
<<event 'mouseup.checkHighlighted' `'#' + _highlightId`>>
<<set $highlightCounter++>>
<<script>>
var selectedText = '';
if (window.getSelection) {
selectedText = window.getSelection().toString();
}
else if (document.getSelection) {
selectedText = document.getSelection().toString();
}
else if (document.selection) {
selectedText = document.selection.createRange().text;
}
else {
console.log('selection not supported');
}
if (selectedText) {
/* Update the story variable: $selection. */
State.variables.selection = selectedText;
}
<</script>>
<<if $selection is _correctHighlight>>
<<set $correctHighlighted ++>>
<<audio "ping" play>>
<<remove "#highlightHere">>
<<run UI.alert("length:"+ $selectedSentences.length)>>
<<checkHighlighted>>
<<else>>
<<audio "wrong" play>>
<<remove "#highlightHere">>
<<checkHighlighted>>
<</if>>
<</event>>
<<event ':passageinit'>>
/* Remove our `mouseup` event handler on navigation. */
<<run $(document).off('mouseup.checkHighlighted')>>
<</event>>
<</silently>>
<div @id="_highlightId">_sentence</div>
<</widget>>
The first part (separating part to be highlighted from sentence) works and then one sentence is displayed. Upon highlighting, success is detected, but no further sentences are loaded.
Could you help me figure out what I am missing?