I need html5 + jquery template. This template I will use in my code in future.
Variables should be define in html code. js code should be in separate file.
Phrases list (should be defined in html):
"I think ? there is a difference"
"We can ? it both ways experimentally ? see if ? are the same or not"
"It must ? at the same ? because"
And texts for each "?" should be defined too.
When "I think ? there is a difference" will be scrolled user will see:
it are that not - words and can select one
When "We can ? it both" will be scrolled user will see: do get try
When " experimentally ? see" will be scrolled user will see: are not to still
When "if ? are the same or not" will be scrolled user will see: they
are it before
if 2 "?" at same time, user will see 2 lists of words: red and blue
and can choose needed word for red and blue "?".
when "?" hide, user will not see any words list.
If user select correct word for "?", correct word will be appear.
If user clicks incorrect word for "?" will be marked as gray. (if they are wrong, they can't try again)
The script will wait for answers only from displayed text. (hidden
"?" will be ignored)
Scrolling time and scoring should be in html variables too.
Please add "I'll use best coding standards." text to your bid.
I need html5 template for this scripts for PC and mobile.
TEXT: There were doors all /around the hall. Each /of them was locked. Alice noticed that one door was the size /of a rat hole. Then she saw a tiny golden key /on a glass table.
She knelt down, and unlocked the tiny door /with the key. /Through the doorway, she could see a beautiful garden. "Oh, I wish I could go /in!" said Alice. But, /of course, she was much /too big. So she locked the door and stood /up.
Here are the words for the top. You can see that the word "of" is used three times.
WORDS: around in of on through too up with
So if the student is viewing "all ? the hall. Each ?"
there would be two lines the same, but the 2nd line would be red and the 2nd "?" would be red (until the first "?" disappears). Then the red line would disappear and the "?" after "Eash" would turn blue.