Question

我正在建立一个使用HTML，CSS，MySQL和Javascript的网站，允许用户登录并进行测验，测验有40个问题。

下面的Javascript代码是一个倒计时器，它包含40秒后名为“questions”的变量，它将自动传递给下一个问题。

    var i = 0;
var cEl = document.getElementById('countdown');
var qEl = document.getElementById('question');
var questions = [
 
  'Question1 ?',
  'Question2 ?',
  'Question3 ?',
  'Question4 ?'
];

var Countdown = function (time) {
  this.time = time;
  this.observers = [];
};

Countdown.prototype.start = function () {
  setTimeout(function () {
    if (this.time-- > 0) {
      this.updateObservers();
      this.start();
    }
  }.bind(this), 1000);
};

Countdown.prototype.addObserver = function (observer) {
  this.observers.push(observer);
};

Countdown.prototype.updateObservers = function () {
  var i, l = this.observers.length;
  for (i = 0; i < l; i++) {
    this.observers[i](this.time);
  }
};

function printTime (time) {
  cEl.innerHTML = time + 's';
}

function nextQuestion (time) {
  if (time <= 0) run();
}

function run () {
  var c;
  if (i < questions.length) {
    qEl.innerHTML = questions[i++];
    c = new Countdown(40);
    c.addObserver(printTime);
    c.addObserver(nextQuestion);
    printTime(c.time);
    c.start();
  } else {
    document.body.innerHTML = 'Fin du quiz';
  }
}

run();

这是我的“quiz.php”文件的一部分，我希望插入问题：

<!doctype html>
<html>

<head>
  <title>
    Quiz
  </title>
</head>

<body class="no-scroll">
  <div>
    <!-- some code here -->
  </div>
  <!-- some code here -->

  <script src="js/countdown_script.js"></script>
</body>

</html>

目前，问题在以下变量中：

var questions = [
     
      'Question1 ?',
      'Question2 ?',
      'Question3 ?',
      'Question4 ?'
    ];

但我想使用已存在于数据库中的问题及其答案，每个问题都有2或3个可能的答案，我已经读过我不应该在.js文件中添加php代码，我尝试在下面的php代码中添加问题变量，但它不起作用：

<!doctype html>
<html>

<head>
  <title>
    Quiz
  </title>
</head>

<body class="no-scroll">
  <div>
    <!-- some code here -->
  </div>
  <!-- some code here -->

  <script src="js/countdown_script.js"> 
 var questions = [  
  'Question1 ?',
  'Question2 ?',
  'Question3 ?',
  'Question4 ?'
];</script>
</body>

</html>

在我的案例中，最好的方法是什么？鉴于我还是初学者，我只知道html，css，一些javascript，php和mysql。

Answer 1

您需要制作一个小型API。

步骤1.在您的应用程序中创建一个附加页面，该页面将输出包含来自dataabse的数据的干净JSON数组

例如：myApiWithQuestions.php

.then

步骤2：使用JQuery进行ajax调用以查找刚刚创建的页面

{
questions: {
    question1: {
        "content":"content of the question",
        "possibleAnswers":[
             "something", "another answer"
         ] 
    },
    question2: {
        "content":"content of the question",
        "possibleAnswers":[
             "something", "another answer"
         ] 
    },

}}

on .done函数继续执行您的脚本

Answer 2

你在哪里读到你不应该在Javascript中运行PHP代码？

无论如何，它并不重要：你可以。我一直这样做。

    <script type="text/javascript" src="js/countdown_script.js"> 
    <script type="text/javascript"><!--
    var questions = [  
    <?php
    //create and run your mysql query

    //loop through your results
    while($row=mysql_fetch_array($results)){
      //print your results in javascript format
      printf("'%s ?'\n",$row['question']);
    }
    ?>
    ];
    --></script>

如何使用PHP从数据库中获取数据并将其传递给Javascript

2 个答案: