Doitsu, thank you so much, that code help me alot to understand many things!!
But i have some doubts, can you explain me?
The first one:
I have 4 images to each letter (A, B, C and D),
First image, is the Normal image, wihtout any modification.
Second image, this is the "Hover" just to give a highlight.
Third image, This is the "Wrong Answer", which change the "Normal" image to letter with red background
and Fourth image, The "Correct Answer" which change the "Normal" image to letter with Green background.
I was doing like this:
I've been doing one fuction to each Type (Normal, Hover, Correct and Wrong) like this.
Code:
<script type="text/javascript">
//<![CDATA[
function Atv_Reset_A(img) {
img.src = "../Images/1_Atv_a_Normal.svg";
}
function Atv_Reset_B(img) {
img.src = "../Images/2_Atv_b_Normal.svg";
}
function Atv_Reset_C(img) {
img.src = "../Images/3_Atv_c_Normal.svg";
}
function Atv_Reset_D(img) {
img.src = "../Images/4_Atv_d_Normal.svg";
}
--------------------------------------------------------------------
function Atv_Hover_A(img) {
img.src = "../Images/1_Atv_a_Hover.svg";
}
function Atv_Hover_B(img) {
img.src = "../Images/2_Atv_b_Hover.svg";
}
function Atv_Hover_C(img) {
img.src = "../Images/3_Atv_c_Hover.svg";
}
function Atv_Hover_D(img) {
img.src = "../Images/4_Atv_d_Hover.svg";
}
--------------------------------------------------------------------
function Atv_Correct_A(img) {
img.src = "../Images/1_Atv_a_Correct.svg";
}
function Atv_Correct_B(img) {
img.src = "../Images/2_Atv_b_Correct.svg";
}
function Atv_Correct_C(img) {
img.src = "../Images/3_Atv_c_Correct.svg";
}
function Atv_Correct_D(img) {
img.src = "../Images/4_Atv_d_Correct.svg";
}
--------------------------------------------------------------------
function Atv_Wrong_A(img) {
img.src = "../Images/1_Atv_a_Wrong.svg";
}
function Atv_Wrong_B(img) {
img.src = "../Images/2_Atv_b_Wrong.svg";
}
function Atv_Wrong_C(img) {
img.src = "../Images/3_Atv_c_Wrong.svg";
}
function Atv_Wrong_D(img) {
img.src = "../Images/4_Atv_d_Wrong.svg";
}
//]]>
</script>
Code:
<p class="C_Txt"><img alt="" class="Atv" onclick="Atv_Wrong_A(this)" onmousemove="Atv_Hover_A(this)" onmouseout="Atv_Reset_A(this)" src="../Images/1_Atv_a_Normal.svg" />bla bla bla</p>
<p class="C_Txt"><img alt="" class="Atv" onclick="Atv_Wrong_B(this)" onmousemove="Atv_Hover_B(this)" onmouseout="Atv_Reset_B(this)" src="../Images/2_Atv_b_Normal.svg" />bla bla bla</p>
<p class="C_Txt"><img alt="" class="Atv" onclick="Atv_Wrong_C(this)" onmousemove="Atv_Hover_C(this)" onmouseout="Atv_Reset_C(this)" src="../Images/3_Atv_c_Normal.svg" />bla bla bla</p>
<p class="C_Txt"><img alt="" class="Atv" onclick="Atv_Correct_D(this)" onmousemove="Atv_Hover_D(this)" onmouseout="Atv_Reset_D(this)" src="../Images/4_Atv_d_Normal.svg" />bla bla bla</p>
But one is interfering with the other ... Hover is interfering with "Correct" or "Wrong" as soon as a response is chosen, being right or wrong in the mouse click, as soon as I move the mouse, it returns to the hover image.
So i changed, i deleted the Hover. Now i'm using only "Correct" and "Wrong" on mouse click.
Like this:
Code:
<p class="C_Txt"><img alt="" class="Atv" onclick="Atv_Correct_D(this)" src="../Images/4_Atv_d_Normal.svg" />bla bla bla</p>
But how can i do only one of the answers show "Correct" or "Wrong", resetting the others answers to "Normal".
At the moment, I still can not configure, that only one answer is appearing "Correct" or "Wrong". The way it is now, if I press in all the letters, all the "Wrong" turn red and "Correct" turns green.
Second doubt
Can you tell me the best readers to epub 3 (who read JavaScript and other interactive functions). Im using Bookshelf to read that ePub, cus is the only one i have, who read interactive functions.