Baz*_*Baz 19 javascript html5 session-storage epub epub3
我想在我的固定布局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
来自您提问的Citate: 我希望测验适用于iBooks以及Android和Windows平板电脑和台式机.
浏览器本身不支持从这种类型的文件中读取和显示.如果你真的想拥有它,那么你必须编程所有这些.这对你来说并不是真的有必要,因为我们已经拥有了JavaScript库:
但是不要忘记:在这两种情况下,它们都具有NodeJS服务器作为先决条件.
然后你必须考虑这个过程的所有资源 - 它真的太多了!太多的开发工作,太多的资源,太多的能源浪费!
因为这一切,没有人这样做.
来自您提问的Citate:您 如何建议我实施我的测验？
您可以在一个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平板电脑和桌面.