Совместное использование данных на страницах электронных книг

Я хочу провести викторину в конце главы в моей электронной книге epub3. Эта опрос будет растягиваться по нескольким страницам и будет иметь множественный выбор в природе. Каждый вопрос будет состоять из самого вопроса и четырех вариантов, каждый с переключателем. В конце викторины пользователь нажмет кнопку, чтобы показать их общий результат. Для этого мне нужно будет обмениваться информацией между страницами. Один из способов сделать это - все страницы должны быть в одном документе XHTML, а затем я могу сохранить ответы, которые студент дает для каждого вопроса в переменной javascript. Однако действительно ли имеет место наличие нескольких страниц фиксированной книги epub3 в одном файле XHTML?, так как я здесь:

<?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 Tablets и Desktops.

Как бы вы посоветовали мне реализовать свою викторину?

Ответ 1

Я думаю, что вы действительно не понимаете, насколько сложно все это реализовать и поддерживать использование 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 Tablets и Desktops.

Браузеры не поддерживают чтение и отображение из этого типа файлов изначально. Если вы хотите действительно иметь это, тогда вам нужно программировать все это. Это для вас не очень важно, потому что у нас уже есть библиотеки JavaScript:

  • Epub.js - библиотека JavaScript для рендеринга документов ePub в браузере;
  • Readium-js - процессор обработки EPUB, написанный на Javascript

Но не забывайте: в обоих случаях у них есть предварительное условие для сервера 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)">

Ответ 2

В соответствии со спецификацией, когда rendition:layout установлен на pre-paginated:

Данное исполнение предварительно разбито на страницы. Считывающие системы ДОЛЖНЫ производить ровно одну страницу на предмет itemref позвоночника при рендеринге.

То, как я это понимаю, это то, что нет, неверно иметь несколько страниц в одном файле (если я правильно помню, это только файлы, на которые можно ссылаться в spine/manifest). Тем не менее, это может быть недействительным, по существу, для целей <nav>... Не стесняйтесь протестировать, но IMHO это не стоит, потому что...

... о хранении данных, IDPF устанавливает множество правил в отношении соблюдения читателями. Тем не менее, я серьезно сомневаюсь в том, что система чтения, которая отрицает скрипты, будет иметь большой успех, поскольку для любого интерактивного поведения требуются скрипты. Тем более, что этот формат в первую очередь предназначен для образовательных целей, где взаимодействие является отличным дополнением. Кроме того, скрипты могут быть отключены пользователем (согласно документу), конечно: у браузеров это тоже, кто его использует? Следовательно, localStorage. ;)

Наконец, как было отмечено выше, оно действительно - не отображается в браузере, но контекст действительно близок к веб-браузеру с некоторыми ограничениями. Практически, можно было бы (следует?) Предположить, что читатель является браузером, просто ограниченным вселенной, описываемой его application/oebps-package+xml с причудливым типом MIME.

Ответ 3

Я хотел бы, чтобы опрос работала на iBooks, а также на Android и Windows Tablets и Desktops.

Взгляните на супербуки, которые являются веб-приложениями или HTML-приложениями, а не "файловой" книжной системой, которая живет за пределами Интернета. Я думаю, что это поможет, потому что вы ищете что-то, что работает во всех устройствах и браузерах (планшет, мобильный и рабочий стол), а также хотите добавить интерактивную викторину внутри книги. Bookiza - это инструмент, который вы можете использовать для создания суперкниги.

Полное раскрытие: я являюсь создателем Bubblin и Bookiza.