В дополнение к несоответствию идентификатора / класса, о котором упоминали другие, нет элемента с идентификатором или классом «question», хотя есть <p class="q">.
PHP-скрипт выполняется перед JSТаким образом, ваш цикл заполнения массивов JS неоднократно заполняет их первыми значениями из массивов PHP.Сценарий, который выполняет браузер:
var Q = []; var op1 = []; var op2 = []; var op3 = []; var op4 = []; var ans = [];
for(i=1;i<=10;i++)
{
Q[i] = "[question 1, or possibly question 2]";
op1[i] = "[option 1-1 ...]";
op2[i] = "[option 1-2...]";
op3[i] = "[option 1-3...]";
op4[i] = "[option 1-4...]";
ans[i] = "[answer 1 ...]";
}
Вместо этого полностью сгенерируйте массив в PHP:
var Q = [ <?php echo implode(', ', array_map('json_encode', $Q)); ?> ];
Вместо отдельного массива для каждого компонента вопроса, отдельный массив вопросаобъекты облегчают объединение вопросов и вариантов выбора:
<?php
// Fetching DB rows should be handled by a class or function that maps
// DB rows to PHP objects, which is part of a data access layer,
// rather than where you generate HTML output, which belongs to the
// presentation layer.
// For this example, we use example data rather than the result of an SQL query.
$questionQry = array(
array('Question 1?', 'Choice 1 A', 'Choice 1 B', 'Choice 1 C', 'Choice 1 D'),
array('Question 2?', 'Choice 2 A', 'Choice 2 B', 'Choice 2 C', 'Choice 2 D'),
array('Question 3?', 'Choice 3 A', 'Choice 3 B', 'Choice 3 C', 'Choice 3 D'),
array('Question 4?', 'Choice 4 A', 'Choice 4 B', 'Choice 4 C', 'Choice 4 D')
);
// encode data so it's suitable to be output as JS.
// If you use PDO, you don't need to change this loop.
foreach ($questionQry as $row) {
$questions[] = json_encode(array(
'query' => $row[0],
'choices' => array_slice($row, 1)
));
}
?>
var questions = [ <?php echo implode(', ', $questions) ?> ];
Обратите внимание, что это показывает еще одно преимущество PDO по сравнению со старым расширением mysql: результаты запроса могут быть зациклены с помощью foreach,точно так же как массивы, так как PDOStatement реализует Traversable.Таким образом, вы можете переключаться между массивами для примеров и результатами SQL для производственного кода с минимальным переписыванием кода.
Способ структурирования вашего HTML , как только вы исправите другие проблемы, которые увидит пользовательвсе вопросы, затем все первые возможные ответы, затем второй и т. д.Вместо этого вы можете создать элемент, который вы можете clone , а затем заполнить его содержимым.Мыслить структурно;Вопрос - это запрос и некоторые варианты, которые представляют собой список (упорядоченный).HTML должен отражать это.
<p id="QuestionTemplate" class="question" style="display: none">
<div class="query"></div>
<ol class="choices">
<li><input type="radio" value="0" /><label></label></li>
<li><input type="radio" value="1" /><label></label></li>
<li><input type="radio" value="2" /><label></label></li>
<li><input type="radio" value="3" /><label></label></li>
</ol>
</p>
Примечание: добавьте .choices { list-style-type: upper-alpha; } в таблицу стилей, и варианты ответов будут названы от A до D.
Чтобы заполнить шаблон вопроса:
function renderQuestion(qstn, qid) {
var $qElt = $('#QuestionTemplate').clone();
$qElt.find('.query').attr('id', qid)
.text(qstn.query);
$qElt.find('.choices').children().each(function (i, item) {
item.find('input').attr({name: qid,
id: qid+'_'+i});
item.find('label').text(qstn.choices[i])
.attr('for', qid+'_'+i);
}
}
$(function() {
for (var i=0; i < Q.length; ++i) {
renderQuestion(Q[i], 'q'+i);
}
});
Или создайте вопросы с нуля:
function renderQuestion(qstn, qid) {
var qElt = document.createElement('p');
qElt.id = 'Question_'+qid;
var elt= document.createElement('div');
elt.appendChild(document.createTextNode(qstn.query));
elt.className="query";
qElt.appendChild(elt);
elt = document.createElement('ol');
elt.className="choices";
for (var i=0; i < qstn.choices.length; ++i) {
var choice = document.createElement('li');
choice.appendChild(document.createElement('input'));
choice.lastChild.type='radio';
choice.lastChild.name = qid;
choice.lastChild.id = qid+'_'+i;
choice.lastChild.value = i;
choice.appendChild(document.createElement('label'));
choice.lastChild.for = qid+'_'+i;
choice.appendChild(document.createTextNode(qstn.choices[i]));
elt.appendChild(choice);
}
qElt.appendChild(elt);
document.appendChild(qElt);
}
В любом случае правильные ответы не должны выводиться при создании JS.
Поскольку вы невам не нужен JS для генерации вопросов, еще лучше было бы генерировать вопросы в PHP, что означает, что вам не нужно беспокоиться о том, что делать, когда JS недоступен.
<?php
// Fetching DB rows should be handled by a class or function that maps
// DB rows to PHP objects, which is part of the data access layer,
// rather than where you generate HTML output.
// For this example, we just use example data.
$questions = array(
array('query' => 'Question 1?', 'A' => 'Choice 1 A', 'B' => 'Choice 1 B',
'C' => 'Choice 1 C', 'D' => 'Choice 1 D'),
array('query' => 'Question 2?', 'A' => 'Choice 2 A', 'B' => 'Choice 2 B',
'C' => 'Choice 2 C', 'D' => 'Choice 2 D'),
array('query' => 'Question 3?', 'A' => 'Choice 3 A', 'B' => 'Choice 3 B',
'C' => 'Choice 3 C', 'D' => 'Choice 3 D'),
array('query' => 'Question 4?', 'A' => 'Choice 4 A', 'B' => 'Choice 4 B',
'C' => 'Choice 4 C', 'D' => 'Choice 4 D')
);
?>
<?php foreach ($query as $i => $q): ?>
<p id="Question_<?php echo $i; ?>" class="question">
<div class="query"><?php echo array_shift($q); </div>
<ol class="choices">
<?php foreach ($q as $j => $choice): ?>
<li>
<input type="radio" name="<?php echo "q$i"; ?>" id="<?php echo "q${i}_${j}"; ?>" value="<?php echo $j; ?>" />
<label for="<?php echo "q${i}_${j}; ?>"><?php echo $choice; </label>
</li>
<?php endforeach; ?>
</ol>
</p>
<?php endforeach; ?>