javascript - paperwhite - libros de informatica gratis
Compartir datos a través de páginas de libros electrónicos (3)
Quiero tener una prueba al final de un capítulo en mi libro electrónico de diseño fijo epub3. Este cuestionario se extenderá a lo largo de varias páginas y será de opción múltiple en la naturaleza. Cada pregunta constará de la pregunta en sí misma y cuatro opciones, cada una con un botón de opción. Al final de la prueba, el usuario hará clic en un botón para revelar su resultado general. Para ello necesitaré compartir información entre páginas. Una forma de hacerlo es que todas las páginas estén en un documento XHTML y luego puedo almacenar las respuestas que el estudiante da para cada pregunta en una variable de javascript. Sin embargo, ¿es válido tener varias páginas de un libro epub3 de diseño fijo en el mismo archivo XHTML ?, como lo estoy haciendo aquí:
<?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>
Se veía bien en iBooks.
Alternativamente, si se usan varias páginas, podría almacenar las respuestas de los estudiantes usando window.sessionStorage . Sin embargo, no tengo idea de cuántos lectores admiten el almacenamiento. Me gustaría que la prueba funcione para iBooks y también para tabletas y computadoras de escritorio con Android y Windows.
¿Cómo me aconsejaría que implementara mi cuestionario?
Me gustaría que la prueba funcione para iBooks y también para tabletas y computadoras de escritorio con Android y Windows.
Eche un vistazo a los Superbooks que son aplicaciones web / HTML en lugar de un sistema de libros "basado en archivos" que vive fuera de la web. Creo que sería de ayuda porque está buscando algo que funcione en todos los dispositivos y navegadores (tableta, dispositivo móvil y computadora de escritorio) y también desee agregar una prueba interactiva dentro del libro. Bookiza es la herramienta que puede utilizar para crear un Superbook.
Revelación completa: soy el creador de Bubblin y Bookiza.
Creo que realmente no entiendes lo complejo que es implementar y soportar el uso de ePub. Me gustaría recomendarle que lea sobre el formato de archivo ePub . Ver la última versión de especificación de formato ePub también.
Una publicación de ePub (incluido ePub3) se entrega como un solo archivo. Este archivo es un archivo comprimido sin cifrar que contiene un conjunto de recursos interrelacionados.
Un ejemplo de estructura de archivos ePub:
--ZIP Container--
mimetype
META-INF/
container.xml
OEBPS/
content.opf
chapter1.xhtml
ch1-pic.png
css/
style.css
myfont.otf
toc.ncx
Mencione su pregunta: me gustaría que la prueba funcione para iBooks y también para tabletas y computadoras de escritorio con Android y Windows.
Los navegadores no admiten una lectura y visualización de este tipo de archivos de forma nativa. Si realmente quieres tener esto, entonces tienes que programar todo esto. Es para ti que no es realmente necesario porque ya tenemos bibliotecas de JavaScript:
- Epub.js : biblioteca de JavaScript para representar documentos ePub en el navegador;
- Readium-js - motor de procesamiento EPUB escrito en Javascript
Pero no se olvide: en ambos casos tienen como requisito previo un servidor NodeJS.
Entonces tienes que pensar en todos los recursos para este proceso, ¡es realmente demasiado! ¡Demasiado trabajo de desarrollo, muchos recursos y demasiada pérdida de energía!
Por todo esto nadie lo hace así.
Mencione su pregunta: ¿Cómo me aconsejaría que implementara mi cuestionario?
La solución recomendada por mi parte.
Puede tener todas sus preguntas para su prueba en un archivo HTML y puede guardar todas las respuestas en una matriz. Les he preparado el ejemplo de demostraciones:
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)">
Este código debería funcionar para iBooks, para Android, para tabletas Windows y para computadoras de escritorio.
De acuerdo con la specification , cuando la rendition:layout está configurada en pre-paginated :
La rendición dada es pre paginada. Los sistemas de lectura DEBEN producir exactamente una página por referencia de espina dorsal al renderizar.
La forma en que lo entiendo es que no, no es válido tener varias páginas en el mismo archivo (si recuerdo correctamente, solo se puede hacer referencia a los archivos en la columna vertebral / manifiesto). Sin embargo, puede que no sea válido esencialmente para el propósito de <nav> ... Siéntase libre de realizar pruebas exhaustivas, pero en mi humilde opinión no vale la pena porque ...
... sobre el almacenamiento de datos, el IDPF establece muchas reglas para el cumplimiento de los lectores. Sin embargo, dudo seriamente que un sistema de lectura que niegue los scripts tenga mucho éxito, ya que cualquier comportamiento interactivo requiere scripts. Sobre todo porque este formato está destinado principalmente para fines educativos, donde las interacciones son una gran adición. Además, los scripts pueden ser deshabilitados por el usuario (según el documento), seguro: los navegadores también tienen eso, ¿quién lo usa? Por lo tanto, el localStorage . ;)
Por último, como se comentó anteriormente, no se procesa en el navegador, pero el contexto es muy parecido al de un navegador web, con algunas limitaciones. En la práctica, se podría (debería?) Asumir que el lector es un navegador, simplemente confinado al universo descrito por su application/oebps-package+xml con un tipo MIME sofisticado.