12-01-2017, 07:28 AM | #1 |
Junior Member
Posts: 6
Karma: 10
Join Date: Dec 2017
Location: Brazil
Device: Sigil
|
How to Script on Sigil
Hello everyone.
How do I run <script></script>? I'm starting to learn ePub 3, and I'm trying to do a CheckBox, where have the question and 3 options below. Checkbox is in front of each option. When the selected option is correct, the circle of the checkbox turns green, if it is wrong, it turns red. However, no Scripts are working. I've tried everything already. but I think there's something missing. Can someone help me with this Checkbox Script? |
12-01-2017, 08:27 AM | #2 |
Grand Sorcerer
Posts: 5,582
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
|
|
12-01-2017, 02:36 PM | #3 |
Junior Member
Posts: 6
Karma: 10
Join Date: Dec 2017
Location: Brazil
Device: Sigil
|
This is the problem Doitsu, i dont know why my <script></script> didnt work...
It seems that sigil is not accepting the Script tag. Shows as if what is inside <script> </script> is not being recognized Code:
<script> function Atv_Hover() { document.getElementById("A").src = "../Images/1_Atv_a_Hover.svg"; document.getElementById("B").src = "../Images/2_Atv_b_Hover.svg"; document.getElementById("C").src = "../Images/3_Atv_c_Hover.svg"; document.getElementById("D").src = "../Images/4_Atv_d_Hover.svg"; } </script> Code:
<p class="C_Txt"><img class="Atv" id="A" src="../Images/1_Atv_a_Normal.svg" onmousemove="Atv_Hover"/>a) Option 1.</p> <p class="C_Txt"><img class="Atv" id="B" src="../Images/2_Atv_b_Normal.svg" onmousemove="Atv_Hover"/>b) Option 2.</p> <p class="C_Txt"><img class="Atv" id="C" src="../Images/3_Atv_c_Normal.svg" onmousemove="Atv_Hover"/>c) Option 3.</p> <p class="C_Txt"><img class="Atv" id="D" src="../Images/4_Atv_d_Normal.svg" onmousemove="Atv_Hover"/>d) Option 4.</p> But on my Sigil is not working. |
12-01-2017, 05:17 PM | #4 |
Grand Sorcerer
Posts: 5,582
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
|
That's because your script contains at least one typo: onmousemove should read onmouseover.
I created a small proof-of-concept epub that works with Sigil. It contains the following code: Spoiler:
(It shows a circled question mark (help.png) that changes into a checkmark (ok-filled.png) or a cross (cancel-filled.png) on mouseover.) For more script examples, see the EPUBTEST 0102 - Scripting Tests test file. |
12-04-2017, 01:01 PM | #5 |
Junior Member
Posts: 6
Karma: 10
Join Date: Dec 2017
Location: Brazil
Device: Sigil
|
Another Doubts
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> 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> 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. |
12-04-2017, 04:44 PM | #6 | ||
Grand Sorcerer
Posts: 5,582
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
|
Quote:
Quote:
|
||
12-06-2017, 10:44 AM | #7 |
Junior Member
Posts: 6
Karma: 10
Join Date: Dec 2017
Location: Brazil
Device: Sigil
|
Thank you
Doitsu, Thank you.
You helped me a lot, and you solved many doubts! I appreciate. I just waiting, if someone help me for the last doubt about the "Checkbox" images. |
12-06-2017, 12:37 PM | #8 |
Junior Member
Posts: 6
Karma: 10
Join Date: Dec 2017
Location: Brazil
Device: Sigil
|
The last Doubt, Doitsu :D
Doitsu, is it possible, give an id to each answer, where one ID for all wrong answers and another id to all "Correct" and use a switch to never appear the image wrong twice?
Like this: Code:
<p class="C_Atv_Question"><strong class="Bold">1. First Question</strong></p> <p class="C_Txt_Atv"><img alt="" class="Atv" id="Wrong_1" onclick="Atv_Wrong_A(this)" src="../Images/Atv_Normal.png" />Answer 1</p> <p class="C_Txt_Atv"><img alt="" class="Atv" id="Wrong_1" onclick="Atv_Wrong_B(this)" src="../Images/Atv_Normal.png" />Answer 2</p> <p class="C_Txt_Atv"><img alt="" class="Atv" id="Wrong_1" onclick="Atv_Wrong_C(this)" src="../Images/Atv_Normal.png" />Answer 3</p> <p class="C_Txt_Atv"><img alt="" class="Atv" id="Correct" onclick="Atv_Correct_D(this)" src="../Images/Atv_Normal.png" />Answer 4</p> <p class="C_Atv_Question"><strong class="Bold">2. Second question</strong></p> <p class="C_Txt_Atv"><img alt="" class="Atv" id="Wrong_2" onclick="Atv_Wrong_A(this)" src="../Images/Atv_Normal.png" />Answer 1</p> <p class="C_Txt_Atv"><img alt="" class="Atv" id="Wrong_2" onclick="Atv_Wrong_B(this)" src="../Images/Atv_Normal.png" />Answer 2</p> <p class="C_Txt_Atv"><img alt="" class="Atv" id="Correct" onclick="Atv_Correct_C(this)" src="../Images/Atv_Normal.png" />Answer 3</p> <p class="C_Txt_Atv"><img alt="" class="Atv" id="Wrong_2" onclick="Atv_Wrong_D(this)" src="../Images/Atv_Normal.png" />Answer 4</p> Thats what im trying to do, i put the same ID for each answer, but i put the number of the Question too, how you can see with "Bold" on the code block. Do you thing is it possible solve my problem doing that? What im trying to do is equal a CheckBox, but the "Box" of the checkbox, is an image. If you can, please help me with that. I need so much |
12-06-2017, 03:50 PM | #9 | |
Grand Sorcerer
Posts: 5,582
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
|
Quote:
Code:
<p><img alt="" class="wrong" onclick="checkAnswer(this)" src="../Images/help.png"/>Answer 3</p> <p><img alt="" class="correct" onclick="checkAnswer(this)" src="../Images/help.png"/>Answer 4</p> Code:
function checkAnswer(img) {
if (img.classList.contains("correct")) {
img.src = "../Images/ok-filled.png";
} else {
img.src = "../Images/cancel-filled.png";
}
}
Before you continue, you really should work through a JavaScript tutorial for beginners, for example, the JavaScript Tutorial by w3schools. Also don't forget to periodically check your epub with the IDPF EPUB validator. |
|
12-07-2017, 06:00 AM | #10 |
Junior Member
Posts: 6
Karma: 10
Join Date: Dec 2017
Location: Brazil
Device: Sigil
|
That Function work perfectly.
But have the same "problem" i was trying to solve. When i click at the Icon and the image change to Wrong or Correct, if i click in one more, the last one still with the image Wrong or Correct. This is the problem i've been trying to solve. Can you help me with this? I just do not want the wrong image to repeat itself in the same question. Example: We have the first question with 3 answers. When I press the first and second answer, the image will appear in both. I'm trying to make sure that when it's tightened on the second response, the first one that was pressed goes back to the default (as if the function was not yet activated) |
12-07-2017, 06:37 AM | #11 |
Grand Sorcerer
Posts: 27,441
Karma: 192992430
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
This is not really the place for general javascript lessons.
|
12-07-2017, 06:51 AM | #12 | |
Grand Sorcerer
Posts: 5,582
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
|
Quote:
Last edited by Doitsu; 12-07-2017 at 07:11 AM. |
|
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Sigil Error Message: Book File Would Not Open in Sigil | fkustaa | Sigil | 5 | 03-18-2017 12:54 AM |
Sigil-0.8.900 released for testing - Wait for Sigil-0.8.901 | KevinH | Sigil | 106 | 10-04-2015 10:41 AM |
Sigil on Nook vs Sigil on Kobo vs Sigil on iBook | rosshalde | Sigil | 12 | 11-13-2014 09:34 AM |
Sigil script manager | varlog | Sigil | 59 | 08-12-2014 03:47 PM |
Sigil 0.3.4 / Problème CSS entre Sigil et iPad | Grivels | Software | 10 | 07-03-2011 09:06 AM |