Ответ 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)">