web-dev-qa-db-fra.com

Partager des données sur des pages de livres électroniques

Je veux avoir un quiz à la fin d'un chapitre de mon livre électronique epub3 à mise en page fixe. Ce quiz s'étendra sur plusieurs pages et sera à choix multiple. Chaque question comprendra la question elle-même et quatre options, chacune avec un bouton radio. À la fin du questionnaire, l'utilisateur cliquera sur un bouton pour afficher son résultat global. Pour ce faire, je devrai partager des informations entre les pages. Une façon de faire est que toutes les pages soient dans un document XHTML et que je puisse ensuite stocker les réponses que l'étudiant donne pour chaque question dans une variable JavaScript. Cependant, est-il valide d'avoir plusieurs pages d'un livre epub3 à disposition fixe dans le même fichier XHTML ?, comme je le fais ici:

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

Cela avait l'air bien dans iBooks.

Alternativement, si plusieurs pages sont utilisées, je pourrais stocker les réponses des étudiants en utilisant window.sessionStorage. Cependant, je n'ai aucune idée du nombre de lecteurs prenant en charge le stockage. Je souhaite que le questionnaire fonctionne pour iBooks ainsi que pour les tablettes et ordinateurs de bureau Android et Windows. 

Comment conseilleriez-vous que je mette en place mon quiz?

javascripthtml5epubsession-storageepub3
19
Baz

Je pense que vous ne comprenez pas vraiment à quel point tout cela est complexe à mettre en œuvre et à prendre en charge en utilisant ePub. Je vous recommande de lire sur le format de fichier ePub . Voir aussi la dernière version de ePub format specification.

Une publication ePub (ePub3 incluse) est livrée sous forme de fichier unique. Ce fichier est une archive zipped non chiffrée contenant un ensemble de ressources interdépendantes.

Un exemple de structure de fichier ePub:

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

Citate de votre question: _ ​​Je voudrais que le questionnaire fonctionne pour iBooks ainsi que pour les tablettes et les ordinateurs de bureau Android et Windows.

Les navigateurs ne supportent pas une lecture et un affichage natif de ce type de fichiers. Si vous voulez vraiment avoir cela, alors vous devez programmer tout cela. C'est pour vous pas vraiment nécessaire car nous avons déjà des librairies JavaScript:

  • Epub.js - Bibliothèque JavaScript pour le rendu de documents ePub dans le navigateur;
  • Readium-js - Moteur de traitement EPUB écrit en Javascript

Mais n'oublions pas: dans les deux cas, un serveur NodeJS est requis.

Ensuite, vous devez penser à toutes les ressources pour ce processus - c'est vraiment trop! Trop de travail de développement, de ressources et de gaspillage d'énergie!

À cause de tout cela, personne ne le fait de cette façon.

Citate de votre question: _ ​​Comment conseilleriez-vous de mettre en œuvre mon quiz?} _

La solution recommandée par moi

Vous pouvez avoir toutes vos questions pour votre quiz dans un seul fichier HTML et vous pouvez sauvegarder toutes les réponses dans un tableau. J'ai préparé pour vous l'exemple de démonstrations:

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)">

Ce code devrait fonctionner pour iBooks, pour Android, pour les tablettes Windows et pour les ordinateurs de bureau.

8
Bharata

Selon la spécification }, lorsque rendition:layout est défini sur pre-paginated:

Le rendu donné est pré-paginé. Les systèmes de lecture DOIVENT produire exactement une page par élément lors du rendu.

D'après ce que j'ai compris, non, il n'est pas valide de posséder plusieurs pages dans le même fichier (si je me souviens bien, il ne s'agit que de fichiers pouvant être référencés dans le dos/le manifeste). Cependant, il pourrait être invalide essentiellement aux fins de la substance <nav> ... N'hésitez pas à effectuer des tests approfondis, mais à mon humble avis, cela ne vaut pas la peine parce que ...

... sur le stockage des données, l'IDPF définit beaucoup de règles pour la conformité des lecteurs. Cependant, je doute sérieusement qu'un système de lecture qui nie le script aurait beaucoup de succès, car tout comportement interactif nécessite des scripts. D'autant que ce format est principalement destiné à des fins éducatives, où les interactions sont un atout majeur. De plus, les scripts peuvent être désactivés par l'utilisateur (conformément à la doc), bien sûr: les navigateurs l'ont aussi, qui l'utilise? Par conséquent, localStorage. ;)

Enfin, comme indiqué ci-dessus, il s'agit - en effet - non rendu par le navigateur, mais le contexte est très proche d'un navigateur Web, avec certaines limitations. Pratiquement, on pourrait (devrait?) Supposer que le lecteur est un navigateur simplement confiné à l'univers décrit par son fichier de package application/oebps-package+xml avec un type MIME sophistiqué.

3
Stock Overflaw

Je souhaite que le questionnaire fonctionne pour iBooks ainsi que pour les tablettes et ordinateurs de bureau Android et Windows.

Jetez un coup d'œil à Superbooks qui sont des applications Web/HTML au lieu d'un système de livre "basé sur des fichiers" qui réside en dehors du Web. Je pense que cela aiderait parce que vous recherchez quelque chose qui fonctionne sur tous les appareils et navigateurs (tablette, mobile et ordinateur de bureau) et que vous souhaitez également ajouter un questionnaire interactif à l'intérieur du livre. Bookiza est l'outil que vous pouvez utiliser pour créer un Superbook. 

Divulgation complète: je suis le créateur de Bubblin et de Bookiza.

0
marvindanig