Hiding Other Answers in epub2

[robertmchicago]

I am making a reflowable EPUB 2 book using Sigil. The book also has about 400 questions and 400 answers, divided into two parts: one part for the questions, and one part for the answers.
Each question has a link that goes to its answer, and each answer has a link that goes back to its question.
I want to make sure that when a reader clicks on a link to an answer, they only see that one answer, not the other answers.
One simple way is to put each answer in a separate HTML file, but KDP does not allow more than 300 HTML files.
I also tried using page breaks, but they don’t work properly on all devices like Kobo.
I know I can't use JavaScript because most eBook platforms don’t support it.
So, I want to ask: Will this idea work?

After each answer, I add this line in HTML:
<p class="endline">===============</p>

And in CSS:
p.endline {
font-weight: bold;
text-align: center;
margin-bottom: 100vh;
}
This puts a long space after each answer to push the next answer far down, so only one answer is seen at a time.
What do you think? Will this be a good way to solve the problem?

[JSWolf]

Originally Posted by robertmchicago

I am making a reflowable EPUB 2 book using Sigil. The book also has about 400 questions and 400 answers, divided into two parts: one part for the questions, and one part for the answers.
Each question has a link that goes to its answer, and each answer has a link that goes back to its question.
I want to make sure that when a reader clicks on a link to an answer, they only see that one answer, not the other answers.
One simple way is to put each answer in a separate HTML file, but KDP does not allow more than 300 HTML files.
I also tried using page breaks, but they don’t work properly on all devices like Kobo.
I know I can't use JavaScript because most eBook platforms don’t support it.
So, I want to ask: Will this idea work?

After each answer, I add this line in HTML:
<p class="endline">===============</p>

And in CSS:
p.endline {
font-weight: bold;
text-align: center;
margin-bottom: 100vh;
}
This puts a long space after each answer to push the next answer far down, so only one answer is seen at a time.
What do you think? Will this be a good way to solve the problem?

You do not want vh as it doesn't work in ePub2.

[robertmchicago]

Originally Posted by JSWolf

You do not want vh as it doesn't work in ePub2.

Thanks a lot, any suggestion for my problem, PLEASE

[JSWolf]

Originally Posted by robertmchicago

Thanks a lot, any suggestion for my problem, PLEASE

If you are using margin-bottom: 100vh; to mean no bottom margin, just use margin-bottom: 0;

[Turtle91]

Originally Posted by robertmchicago

Thanks a lot, any suggestion for my problem, PLEASE

Have you used {page-break-after: always}?? Or any of its alternative forms...

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

.answer {
  page-break-after: always;
  break-after: always;
  -moz-column-break-after: always;
  -webkit-column-break-after: always;
  *// whatever styling you want //*}

or if you have multiple paragraphs in your answer:

<div class="answer">
  <p>Answer to question #x</p>
  <p>more answer</p>
  <p>even more answer.</p>
</div>

.answer {
  page-break-after: always;
  break-after: always;
  -moz-column-break-after: always;
  -webkit-column-break-after: always;
}
.answer p {*// whatever styling you want //*}

I think I remember hearing something about some readers treating everything as a column (whether single or multiple) so column-break-after might work for those??

[Turtle91]

Originally Posted by JSWolf

You do not want vh as it doesn't work in ePub2.

Using vh as a bottom margin won't hurt anything if it is not supported in compliant renderers...as you well know.


I know - Just use fall-back coding.

[Slevin#7]

I don't know whether this specific solution works with Kindle formats, so you would have to try.

This approach won't split the question-answer segment into two sections, but will show the answer directly under each question. It relies on a checkbox and its :checked pseudo selector to toggle the visibilty of the answer:

HTML

<div class="question">
  <p>Is the sky blue?</p>

  <label for="checkbox-answer_1" class="toggle-answer">
    Click here to show/hide the answer.   
  </label>

  <!-- We have to place the checkbox outside the label element
         since otherwise targeting .answer wouldn't be possible.
         This requires an id to link the label to the checkbox. -->

  <input type="checkbox" id="checkbox-answer_1" class="checkbox-answer"/>

  <div class="answer">
    <p>Yes, the sky is blue.</p>
  </div>
</div>

CSS

.question {
  padding: 0.1em 1em;
  background-color: #eee;
}

.answer {
  visibility: hidden;
  background-color: #ddd;
}

.toggle-answer {
  cursor: pointer;
  /* prevent accidentally selecting */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;   
}

/* hide the checkbox, not a must for functionality */
.checkbox-answer {
  position: absolute;
  top: -1000px;
  left: -6000px;
  width: 0;
  height: 0;
  opacity: 0;
}

.checkbox-answer:checked ~ .answer {
  visibility: visible;
}

[robertmchicago]

Originally Posted by Turtle91

Have you used {page-break-after: always}?? Or any of its alternative forms...

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

.answer {

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.

Now I tried these:
page-break-after: always;
break-after: always;
-moz-column-break-after: always;
-webkit-column-break-after: always;
But it's the same—they work in Kindle Previewer and ADE 2.0, but still not in Kobo Desktop.

[JSWolf]

Originally Posted by Turtle91

Using vh as a bottom margin won't hurt anything if it is not supported in compliant renderers...as you well know.


I know - Just use fall-back coding.

But why use vh for a bottom margin when you can use em and it will work in more places?

[JSWolf]

Originally Posted by Slevin#7

I don't know whether this specific solution works with Kindle formats, so you would have to try.

This approach won't split the question-answer segment into two sections, but will show the answer directly under each question. It relies on a checkbox and its :checked pseudo selector to toggle the visibilty of the answer:

HTML

<div class="question">
  <p>Is the sky blue?</p>

  <label for="checkbox-answer_1" class="toggle-answer">
    Click here to show/hide the answer.   
  </label>

  <!-- We have to place the checkbox outside the label element
         since otherwise targeting .answer wouldn't be possible.
         This requires an id to link the label to the checkbox. -->

  <input type="checkbox" id="checkbox-answer_1" class="checkbox-answer"/>

  <div class="answer">
    <p>Yes, the sky is blue.</p>
  </div>
</div>

CSS

.question {
  padding: 0.1em 1em;
  background-color: #eee;
}

.answer {
  visibility: hidden;
  background-color: #ddd;
}

.toggle-answer {
  cursor: pointer;
  /* prevent accidentally selecting */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;   
}

/* hide the checkbox, not a must for functionality */
.checkbox-answer {
  position: absolute;
  top: -1000px;
  left: -6000px;
  width: 0;
  height: 0;
  opacity: 0;
}

.checkbox-answer:checked ~ .answer {
  visibility: visible;
}

Your toggle-answer CSS is all wrong. None of the code is ePub compliant. Also with your checkbox-answer CSS, your PX are way too large. If you don't know the screen size that's going to be used, thjen you have to code as if it's a small cell phone screen to a large screen.

[Slevin#7]

Originally Posted by JSWolf

Your toggle-answer CSS is all wrong. None of the code is ePub compliant. Also with your checkbox-answer CSS, your PX are way too large. If you don't know the screen size that's going to be used, thjen you have to code as if it's a small cell phone screen to a large screen.

Can you please tell me, where the code is wrong? It passes the epub check and works well in Sigil, Calibre and other readers.

Regarding the px to hide the checkbox, it doesn't matter which size the screen has, it's just a big value to place the checkbox way out of the viewport. Values of -100/-100 should work as well, as long as there is no relative parent along the way up to the body element.

[robertmchicago]

Originally Posted by Slevin#7

I don't know whether this specific solution works with Kindle formats, so you would have to try.

This approach won't split the question-answer segment into two sections, but will show the answer directly under each question. It relies on a checkbox and its :checked pseudo selector to toggle the visibilty of the answer:

HTML

Thanks for the codes!
I tested them on different apps.
In Sigil, they work very well.
In Kindle Previewer, the answer is hidden, but clicking does not show it.
In ADE 2.0, the answer is already visible (it doesn't hide).
In Kobo Desktop, the answer is hidden, but clicking does not show it.
I wish these codes worked in all apps the same way they work in Sigil.
Thanks again!

[JSWolf]

Originally Posted by Slevin#7

Can you please tell me, where the code is wrong? It passes the epub check and works well in Sigil, Calibre and other readers.

Regarding the px to hide the checkbox, it doesn't matter which size the screen has, it's just a big value to place the checkbox way out of the viewport. Values of -100/-100 should work as well, as long as there is no relative parent along the way up to the body element.

.toggle-answer {
  cursor: pointer;
  /* prevent accidentally selecting */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;   
}

/* hide the checkbox, not a must for functionality */
.checkbox-answer {
  position: absolute;
  top: -1000px;
  left: -6000px;
  width: 0;
  height: 0;
  opacity: 0;
}

for toggle-answer, none of code being used is ePub compatible. For checkbox-answer, your px values are way too large.

[Turtle91]

Originally Posted by JSWolf

for toggle-answer, none of code being used is ePub compatible. For checkbox-answer, your px values are way too large.

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??

[Doitsu]

Originally Posted by robertmchicago

I am making a reflowable EPUB 2 book using Sigil. The book also has about 400 questions and 400 answers, divided into two parts: one part for the questions, and one part for the answers.

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.