跨电子书页面共享数据答案

【问题标题】：Share data across e-book pages跨电子书页面共享数据
【发布时间】：2019-01-30 15:23:06
【问题描述】：

我想在我的固定布局 epub3 电子书中的一章末尾进行测验。该测验将跨越多个页面，并且本质上是多项选择。每个问题将由问题本身和四个选项组成，每个选项都有一个单选按钮。在测验结束时，用户将单击一个按钮来显示他们的整体结果。为此，我需要在页面之间共享信息。这样做的一种方法是将所有页面都放在一个 XHTML 文档中，然后我可以将学生为每个问题提供的答案存储在 javascript 变量中。但是，在同一个 XHTML 文件中包含多个固定布局的 epub3 书籍是否有效？就像我在这里所做的那样：

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>My Book</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>

<style>

p.pagebreak {
    page-break-after:always;
} 

</style>
</head>

<body> 

    <p>
        Text on Page 1
    </p>

    <p class="pagebreak"></p>

    <p>
        Text on Page 2
    </p>

    <p class="pagebreak"></p>

    <p>
        Text on Page 3
    </p>
</body>
</html>

在 iBooks 中看起来不错。

或者，如果使用多个页面，我可以使用window.sessionStorage 存储学生的答案。但是，我不知道有多少读者支持存储。我希望测验适用于 iBooks 以及 Android 和 Windows 平板电脑和台式机。

你会如何建议我实施我的测验？

【问题讨论】：

我认为window.sessonStorage 仅适用于当前标签，而window.localStorage 适用于整个浏览器。
@Mean Coder Epub 不会直接在浏览器中呈现。
您可能想出版一本超级书而不是 epub。如果您还没有，请查看bookiza.io。
@Baz，我不知道您是否理解我在回答中的意思。因此，我将更详细地描述它。我建议您在 ePub 文档中的每个页面上添加一个指向带有测验的 HTML 页面的链接（如我的回答），在此链接上方，您可以建议参加测验。在这种情况下，您将实现在所有浏览器和 OP 系统中原生支持您的测验的任务。在这种情况下，您不必编写所有这些额外的程序。如果您对我的回答感到满意，请在我的回答左侧将我的回答标记为已接受？
@Baz，所有这些 HTML 页面都应该可以在您的服务器上在线访问。

标签： javascript html epub session-storage epub3

【解决方案1】：

根据specification，当rendition:layout设置为pre-paginated时：

给定的再现是预先分页的。阅读系统在渲染时必须为每个书脊 itemref 准确生成一页。

我的理解是不，在同一个文件中有多个页面是无效的（如果我没记错的话，它只是可以在书脊/清单中引用的文件）。但是，对于 <nav> 的东西来说，它可能基本上是无效的......随意进行广泛的测试，但恕我直言，这是不值得的，因为......

...关于存储数据，IDPF 将a lot of rules 设置为读者的合规性。但是，我严重怀疑拒绝脚本的阅读系统会取得多大成功，因为任何交互行为都需要脚本。特别是因为这种格式主要用于教育目的，其中互动是一个很好的补充。另外，用户可能会禁用脚本（根据文档），当然：浏览器也有，谁使用它？因此，localStorage。 ;)

最后，正如上面所评论的，它 - 实际上 - 不是浏览器渲染的，但上下文非常接近 Web 浏览器，但有一些限制。实际上，可以（应该？）假设阅读器是一个浏览器，仅仅局限于它的 application/oebps-package+xml 包文件所描述的世界，具有一种奇特的 MIME 类型。

【讨论】：

我今天测试了在两页之间使用 sessionStorage 发送数据，但它不起作用 - 我在 iBooks 中进行了测试。然后我尝试了完全相同的代码，但使用 localStorage 并且它确实有效。我会认为 sessionStorage 是 localStorage 的一个子集。前者不起作用的任何原因？
从未使用过sessionStorage，但我想说平均编码员对您的问题的评论可能会回答这个问题（MDN 顺便说一句）。您想使用session 而不是local 的任何特殊原因？

【解决方案2】：

我认为您并不真正了解实现和支持使用 ePub 的复杂程度。我想推荐你阅读about ePub file format。也请参阅ePub format 规范的最新版本。

ePub 出版物（包括 ePub3）作为单个文件提供。此文件是一个未加密的压缩存档，其中包含一组相互关联的资源。

ePub 文件结构示例：

--ZIP Container--
mimetype
META-INF/
  container.xml
OEBPS/
  content.opf
  chapter1.xhtml
  ch1-pic.png
  css/
    style.css
    myfont.otf
  toc.ncx

引用您的问题： 我希望测验适用于 iBooks 以及 Android 和 Windows 平板电脑和台式机。

浏览器本身不支持读取和显示此类文件。如果你真的想拥有这个，那么你必须对这一切进行编程。这对你来说不是很必要，因为我们已经有了 JavaScript 库：

Epub.js - 用于在浏览器中呈现 ePub 文档的 JavaScript 库；
Readium-js - 用 Javascript 编写的 EPUB 处理引擎

但不要忘记：在这两种情况下，它们都有一个 NodeJS 服务器作为先决条件。

那么你必须考虑这个过程的所有资源 - 这真的太多了！太多的开发工作、太多的资源和太多的能源浪费！

由于这一切，没有人这样做。

引用你的问题： 你会建议我如何实施我的测验？

我推荐的解决方案

您可以将测验的所有问题放在一个 HTML 文件中，并且可以将所有答案保存在数组中。我为你准备了演示示例：

var activePage = 0,
    pages = document.querySelectorAll('.quiz-page'),
    answers = [];

function goToNext(buttonObj)
{
    var questions = document.getElementsByName('question' + activePage),
        value = -1;

    for(var i = 0; i < questions.length; i++)
        if(questions[i].checked)
            value = questions[i].value;

    if(value < 0)
    {
        alert('Please choose one value!');
        return;
    }
    else
        // save the answer in array
        answers[activePage] = value;

    activePage++;

    for(var i = 0; i < pages.length; i++)
        pages[i].style.display = 'none';
    
    if(activePage < pages.length)
        pages[activePage].style.display = 'block';
    else
    {
        buttonObj.style.display = 'none';
        sendResultsToServer();
    }

    if(activePage == pages.length - 1)
        buttonObj.value = 'Get Results';
}

function sendResultsToServer()
{
    var strAllAnswers = answers.join(',');
    console.log('Answers indexes (one on each page): ' + strAllAnswers);

    //TODO: Send results to server using AJAX
    //... your AJAX code ...

    // Following example of code is for server side checking of results.
    // If you want you could do this checking of results on the
    // client side, but somebody could know all the correct
    // results if you do it on the client side. Be careful!

    var questions =
    [
        {
            question: 'True or false: 3 + 3 = 6?',
            answers: ['False','True'],
            correctAnswer: 1
        },
        {
            question: 'What sound does a dog make?',
            answers: ['Meow','Mooo','Woof'],
            correctAnswer: 2
        },
        {
            question: 'Which from movie names below is a science fiction movie?',
            answers: ['Star Wars','Planet of the Apes','Lion King','Shrek'],
            correctAnswer: 1
        },
    ];

    var arAllAnswers = strAllAnswers.split(',');
    var result = '<h3>Results</h3>';

    for(var i = 0; i < questions.length; i++)
    {
        result += '<p><b>' + questions[i].question + '</b></p>';
        result += 'Your answer was: ' + questions[i].answers[arAllAnswers[i]] + '<br>';
        result += 'Correct answer is: ' + questions[i].answers[questions[i].correctAnswer];
    }

    var resultPage = document.querySelector('#result');
    resultPage.innerHTML = result;
    resultPage.style.display = 'block';
}

label{cursor:pointer}

<div class="quiz-page">
    <p><b>Question 1 of 3.</b> True or false: 3 + 3 = 6?</p>
    <label><input type="radio" name="question0" value="0">False</label><br>
    <label><input type="radio" name="question0" value="1">True</label> 
</div>
<div class="quiz-page" style="display:none">
    <p><b>Question 2 of 3.</b> What sound does a dog make?</p>
    <label><input type="radio" name="question1" value="0">Meow</label><br>
    <label><input type="radio" name="question1" value="1">Mooo</label><br>
    <label><input type="radio" name="question1" value="2">Woof</label>
</div>
<div class="quiz-page" style="display:none">
    <p><b>Question 3 of 3.</b> Which from movie names below is a science fiction movie?</p>
    <label><input type="radio" name="question2" value="0">Star Wars</label><br>
    <label><input type="radio" name="question2" value="1">Planet of the Apes</label><br>
    <label><input type="radio" name="question2" value="2">Lion King</label><br>
    <label><input type="radio" name="question2" value="3">Shrek</label>
</div>
<div id="result" style="display:none"></div>
<br>
<input type="button" value="Next" onclick="goToNext(this)">

此代码应该适用于 iBooks、Android、Windows 平板电脑和台式机。

【讨论】：

【解决方案3】：

我希望测验适用于 iBooks 以及 Android 和 Windows 平板电脑和台式机。

看看Superbooks 是网络/HTML 应用程序，而不是存在于网络之外的“基于文件”的图书系统。我认为这会有所帮助，因为您正在寻找适用于所有设备和浏览器（平板电脑、移动设备和台式机）的东西，并且还希望在书中添加交互式测验。 Bookiza 是您可以用来创建超级本的工具。

完全披露：我是 Bubblin 和 Bookiza 的创造者。

【讨论】：