Hiding Other Answers in epub2

[JSWolf]

Originally Posted by Turtle91

It is ePub compatible if the renderer is ePub compliant. ePub renderers are required to ignore bad/non-supported css gracefully...

If ePubcheck doesn't complain about it, neither should you.


Do you happen to have a suggestion to make it work, rather than simply telling people it won't work??

.toggle-answer {
  /* prevent accidentally selecting */
  display: none;
}

For the other, to decide what code to use, we'd need to what the class is doing in the HTML.

[Slevin#7]

Originally Posted by JSWolf

.toggle-answer {
  /* prevent accidentally selecting */
  display: none;
}

For the other, to decide what code to use, we'd need to what the class is doing in the HTML.

What do you mean to accomplish by that? With 'display: none;' you are hiding the label which serves two purposes: first it tells the user where to click and second it is REQUIRED to being clicked on to show the answer. If the checkbox would be visible (which is currently hidden), one could click on the checkbox itself, but you have at least to provide a description.

Also, I'm pretty sure 'cursor: pointer;' which you deleted as well is proper CSS.

And since you stripped the code which should prevent selecting text by accident comepletely, the comment is obsolete - however, I would at least keep 'user-select: none;', this is without any vendor prefix proper code, but maybe not sufficient for all kind of render engines.

[Turtle91]

You also need to remember that not all css has been adopted into ePub standards. What works on a web page isn’t necessarily supported in an ebook.

My comment above was simply to show that just because some css doesn’t work in an epub doesn’t mean it is going to break the book if it is included. The epub is required to gracefully ignore css that it doesn’t support. So you can use all that css if you wish, it just isn’t guaranteed to work and you need to provide coding it can use as a fallback option.

[RbnJrg]

Originally Posted by robertmchicago

Thanks a lot for the suggestion!
I already have tested these codes:
page-break-after: always;
break-after: always;
They work in Kindle Previewer and ADE 2.0, but not in Kobo Desktop.

Kobo Desktop? Who reads in Kobo Desktop nowadays? It's the worst desktop ereader, riddled with bugs. If you buy a Kobo ebook is because you have a Kobo physical device. So if that's your concern, forget about Kobo Desktop and use the solution Turtle91 gave you, forcing page-breaks with:

<p class="answer">Answer to question #x</p>

.answer {
  page-break-after: always !important;
  break-after: always !important;
  -moz-column-break-after: always !important;
  -webkit-column-break-after: always !important;
}

[JSWolf]

Originally Posted by Turtle91

You also need to remember that not all css has been adopted into ePub standards. What works on a web page isn’t necessarily supported in an ebook.

My comment above was simply to show that just because some css doesn’t work in an epub doesn’t mean it is going to break the book if it is included. The epub is required to gracefully ignore css that it doesn’t support. So you can use all that css if you wish, it just isn’t guaranteed to work and you need to provide coding it can use as a fallback option.

Unless you are using an older version of ADE/RMSDK in which case, CSS if feels is wrong, it will toss out all of the CSS.

[JSWolf]

Originally Posted by RbnJrg

Kobo Desktop? Who reads in Kobo Desktop nowadays? It's the worst desktop ereader, riddled with bugs. If that's your concern, forget about Kobo Desktop and use the solution Turtle91 gave you, forcing page-breaks with:

<p class="answer">Answer to question #x</p>

.answer {
  page-break-after: always !important;
  break-after: always !important;
  -moz-column-break-after: always !important;
  -webkit-column-break-after: always !important;
}

The correct CSS code for ePub is

.answer {
  page-break-after: always;
}

You don't need !important. Also, ePub is not a browser so the other code is not needed/valid.

[robertmchicago]

Originally Posted by Doitsu

You could also simply format your answers as footnotes in an epub3 book. If you use the generic footnote code in the Kindle Publishing Guidelines and the Apple Books Asset Guide 5.3.1, the answer will be shown as a popup.

Thanks for the suggestion & links! Using the footnote feature is a smart idea. I also thought about that. But about 150 of my answers have both text and images. Many of the images have width=1250px. I know that some eReaders show footnotes in a small popup, so I don’t think they will show the full answer with image properly

[robertmchicago]

Originally Posted by RbnJrg

Kobo Desktop? Who reads in Kobo Desktop nowadays? It's the worst desktop ereader, riddled with bugs. If you buy a Kobo ebook is because you have a Kobo physical device. So if that's your concern, forget about Kobo Desktop and use the solution Turtle91 gave you, forcing page-breaks with:

<p class="answer">Answer to question #x</p>

.answer {
  page-break-after: always !important;
  break-after: always !important;
  -moz-column-break-after: always !important;
  -webkit-column-break-after: always !important;
}

Thanks for sharing your thoughts.
You’re right. I don’t need to worry too much about Kobo Desktop if page breaks are working fine in other apps. So I’ll use page breaks.
But I was also thinking of giving a kind of "fallback", just in case page breaks don’t work on someone’s device or app.
Here’s my 2-step fallback idea:
(1) Mix the order of the answers.
(2) Add the same lines of text 3 or 4 times between every two answers.

So for example, when someone clicks "show answer" for question 47, and page breaks are not working for their device or app, they will see something like this:

To go back to the question, please click on "Go to Question".
Don’t flip pages forward or backward, you might see other answers that you don’t want to see yet.
To go back to the question, please click on "Go to Question".
Don’t flip pages forward or backward, you might see other answers that you don’t want to see yet.
=====================
Answer 47. Yes, the sky is blue.
"Go to Question"
=====================
To go back to the question, please click on "Go to Question".
Don’t flip pages forward or backward, you might see other answers that you don’t want to see yet.
To go back to the question, please click on "Go to Question".
Don’t flip pages forward or backward, you might see other answers that you don’t want to see yet.
To go back to the question, please click on "Go to Question".
Don’t flip pages forward or backward, you might see other answers that you don’t want to see yet.
=====================
Answer 382. It is not a table.
"Go to Question"
=====================
To go back to the question, please click on "Go to Question".
Don’t flip pages forward or backward, you might see other answers that you don’t want to see yet.