Обмен данными на страницах электронных книг

Question

Обмен данными на страницах электронных книг

Я хочу провести викторину в конце главы моей электронной книги с фиксированным макетом 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.

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

19

javascript html5 epub session-storage epub3

Источник

user607846 24 авг '18 в 07:28

3 ответа

Другие вопросы по тегам javascript html5 epub session-storage epub3

user9801830 27 авг '18 в 03:17 2018-08-27 03:17 · Answer 1 · 2018-08-27 03:17

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

Этот код должен работать для iBooks, для Android, для планшетов Windows и для настольных компьютеров.

user1269732 26 авг '18 в 23:23 2018-08-26 23:23 · Answer 2 · 2018-08-26 23:23

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

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

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

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

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

user605396 27 авг '18 в 03:28 2018-08-27 03:28 · Answer 3 · 2018-08-27 03:28

Мне бы хотелось, чтобы тест работал для iBooks, а также для планшетов и десктопов Android и Windows.

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

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