跨电子书页面共享数据

我想在我的固定布局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平板电脑和台式机。

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

我认为您并不真正了解实现和支持使用ePub的所有这些是多么复杂。我想建议您阅读有关ePub文件格式的信息。另请参阅最新版本的 ePub 格式规范。

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平板电脑和台式机。

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

给定的格式副本是预先分页的。阅读系统在渲染时必须为每个书脊项引用生成一个页面。

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

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

最后，正如上面评论的，它确实不是浏览器渲染的，但上下文非常接近 Web 浏览器，有一些限制。实际上，人们可以(应该？(假设读者是一个浏览器，只是局限于由其application/oebps-package+xml包文件描述的宇宙，具有花哨的MIME类型。

我希望

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

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

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

我推荐的解决方案

相关内容

最新更新

热门标签：