Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Sigil

Notices

Reply
 
Thread Tools Search this Thread
Old 12-01-2017, 07:28 AM   #1
Sdumau1
Junior Member
Sdumau1 began at the beginning.
 
Posts: 6
Karma: 10
Join Date: Dec 2017
Location: Brazil
Device: Sigil
Question 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?
Sdumau1 is offline   Reply With Quote
Old 12-01-2017, 08:27 AM   #2
Doitsu
Grand Sorcerer
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 5,582
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
Quote:
Originally Posted by Sdumau1 View Post
Can someone help me with this Checkbox Script?
You'll have to be more specific. Post the HTML code and the JavaScript script.
Doitsu is offline   Reply With Quote
Old 12-01-2017, 02:36 PM   #3
Sdumau1
Junior Member
Sdumau1 began at the beginning.
 
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>
I do not know anything about using script in sigil, I'm trying to learn, and in the tutorials I see, this is how it's done, with the JavaScript codes inside the <script> tag.
But on my Sigil is not working.
Sdumau1 is offline   Reply With Quote
Old 12-01-2017, 05:17 PM   #4
Doitsu
Grand Sorcerer
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 5,582
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
Quote:
Originally Posted by Sdumau1 View Post
[...]But on my Sigil is not working.
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:
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
  <title></title>
  <link href="../Styles/style.css" type="text/css" rel="stylesheet"/>
  <script>
		function Atv_Hover(img) {
            img.src = "../Images/ok-filled.png";
		}

		function Atv_Hover_Error(img) {
            img.src = "../Images/cancel-filled.png";
		}


		function Atv_Hover_Reset(img) {
            img.src = "../Images/help.png";
		}
</script>
</head>

<body>
  <h3>JavaScript Test</h3>

  <p class="C_Txt"><img class="Atv" id="A" src="../Images/help.png" onmouseover="Atv_Hover_Error(this)" onmouseout="Atv_Hover_Reset(this)"/> a) Option 1.</p>

  <p class="C_Txt"><img class="Atv" id="B" src="../Images/help.png" onmouseover="Atv_Hover(this)" onmouseout="Atv_Hover_Reset(this)"/> b) Option 2.</p>

  <p class="C_Txt"><img class="Atv" id="C" src="../Images/help.png" onmouseover="Atv_Hover_Error(this)" onmouseout="Atv_Hover_Reset(this)"/> c) Option 3.</p>

  <p class="C_Txt"><img class="Atv" id="D" src="../Images/help.png" onmouseover="Atv_Hover_Error(this)" onmouseout="Atv_Hover_Reset(this)"/> d) Option 4.</p>
</body>
</html>


(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.
Attached Files
File Type: epub quiz_script_epub3.epub (9.2 KB, 215 views)
Doitsu is offline   Reply With Quote
Old 12-04-2017, 01:01 PM   #5
Sdumau1
Junior Member
Sdumau1 began at the beginning.
 
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>
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.
Sdumau1 is offline   Reply With Quote
Old 12-04-2017, 04:44 PM   #6
Doitsu
Grand Sorcerer
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 5,582
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
Quote:
Originally Posted by Sdumau1 View Post
But how can i do only one of the answers show "Correct" or "Wrong", resetting the others answers to "Normal"
Unfortunately, I can't help you with that. You might want to try stackoverflow, if you don't get an answer from another MR member.

Quote:
Originally Posted by Sdumau1 View Post
Can you tell me the best readers to epub 3 (who read JavaScript and other interactive functions)
BTW, it you want to test your book with Adobe Digital Editions, you'll need to create an epub3 book. Otherwise the book will be rendered with a different engine. (You can convert epub2 books to epub3 books with the optional epub3 output plugin.)
Doitsu is offline   Reply With Quote
Old 12-06-2017, 10:44 AM   #7
Sdumau1
Junior Member
Sdumau1 began at the beginning.
 
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.
Sdumau1 is offline   Reply With Quote
Old 12-06-2017, 12:37 PM   #8
Sdumau1
Junior Member
Sdumau1 began at the beginning.
 
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
Sdumau1 is offline   Reply With Quote
Old 12-06-2017, 03:50 PM   #9
Doitsu
Grand Sorcerer
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 5,582
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
Quote:
Originally Posted by Sdumau1 View Post
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?
No, all ids in an HTML file need to be unique, however, you could mark right and wrong answers with different class names.

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>
You could then have an onclick function check the class name and display the desired image. For example:

Code:
function checkAnswer(img) {
    if (img.classList.contains("correct")) {
        img.src = "../Images/ok-filled.png";
    } else { 
        img.src = "../Images/cancel-filled.png";
    }
}
I've attached an updated test file that demonstrates this method.

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.
Attached Files
File Type: epub quiz_script_2_epub3.epub (9.3 KB, 150 views)
Doitsu is offline   Reply With Quote
Old 12-07-2017, 06:00 AM   #10
Sdumau1
Junior Member
Sdumau1 began at the beginning.
 
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)
Sdumau1 is offline   Reply With Quote
Old 12-07-2017, 06:37 AM   #11
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
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.
DiapDealer is offline   Reply With Quote
Old 12-07-2017, 06:51 AM   #12
Doitsu
Grand Sorcerer
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 5,582
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
Quote:
Originally Posted by Sdumau1 View Post
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)
In that case you'll either have to add code to:
  • reset all images whenever the function is executed or
  • only reset the images of the other four questions.
You can get the other paragraph/image tags via:

Last edited by Doitsu; 12-07-2017 at 07:11 AM.
Doitsu is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 11:34 PM.


MobileRead.com is a privately owned, operated and funded community.