第十二章 第四個版本的選擇題

第三個版本的時候我們已經設想好，新版本中題目將是動態(tài)生成的，不用我們在FLASH的場景里面一題一題輸入了，我們要做的只是輸入題目和題目答案的數據就夠了。
很明顯，每一條題目都將是一個對象（不然我們學這么多對象的知識干嘛？），而這些所有的題目，會用一個數組來存放

再重提一下，可配合源程序學習 http://www.moock.org/webdesign/l ... op/moockQuizzes.zip

好，開始設計題目的模版
模版就是一個MC，包含兩個TEXT FIELD，里面不用填東西，分別起變量名為：（FOR小鳥：TEXT FIELD就是按工具條里T按鈕拉出來的文本框，同時還要在文本面板(ctrl+t)里將其改為Dynamic Text，變量名則在面板的Variable處改）
* qNum （以后將顯示題目的編號）
* qText （以后將顯示題目的正文）
我們還要在庫里面做標識，點一庫面板(ctrl+l)右上的Options>> Linkage ，選第二個Expert this symbol，identifier填上questionTemplate，至此，題目模版完成

再制作選項的模版
選項模版應包括一個選擇用的按鈕
還有該選項的內容，一個起名為answerText的TEXT FIELD
在本例的后面，將為每一個動態(tài)生成的選項一個唯一的名字，譬如： "answer0", "answer1",..."answern".
答題者所選定的答案將由這個名字來決定，調用一個MC的名字，用的是_name這個屬性
所以答題的按鈕上面的AS為：
on (release) {
  // Trim the prefix "answer" off this clip's name
  // 下面使用了String.slice()方法，例如_name為answer0，它將被處理成0，slice的具體語法請查閱AS字典
  // 按鈕提交什么由該MC的名字決定的，我作個標記 @@ ，記得一會看回來
  choice = _name.slice(6, _name.length);
  // 與前面的例子一樣，最后將答案提交給answer函數處理，不過現在我們是在某一MC里面用外面主時間線的函數了，所以得加上_root
  _root.answer(choice);
}
最后，Options>> Linkage，標識名：answerTemplate，制作模版的工作就完成了

下面將是放在第一幀的程序主體，可要打起精神來了：

// Stop the movie
stop();
// Init main timeline variables
var displayTotal; // Text field for user's final score
var totalCorrect = 0; // Number of questions answered correctly

// Array containing the user's guesses 記錄作答答案的數組
var userAnswers = new Array();

// Number of the question the user is on 記錄正在作答中題目的編號
// 要注意的是，它是由0開始的，第一題的編號是0，因為我們要用到數組，數組的第一個編號是0，所以這里我們也用0
var currentQuestion = 0;


// The Question constructor
// 以下是新類型對象question的構造函數，包含三個屬性：正確答案，題目正文，各個選項
function Question (correctAnswer, questionText, answers) {
  this.correctAnswer = correctAnswer;
  this.questionText = questionText;
  this.answers = answers;
}

// Import the source file containing our array of question objects
// 咦？應該是輸入各條題目的數據先啊，放哪去了？因為嘛，數據輸入是個與編程無關的過程，為了讓代碼更優(yōu)雅，這些繁瑣的東西扔別地方去了，AS太長，會使查閱相當麻煩，分開存放也是好習慣！
// #include是引用外部AS命令，可以將AS分開儲存于各個后綴名為AS的文件中，輸入題目的代碼就是放到了questionsArray.as中（記得和FLA放在同一目錄下喔）
#include "questionsArray.as"

//// 我改變了一下教程的結構，把questionsArray.as的內容也插入進來了，因為跳過這段的話，看起來會有疑問
//// 以下內容系存放questionsArray.as中的

// 輸入數據其實是建立對象
// MOOCK用一個數組還存放這些對象，這樣對象才更易于管理
// 不要被括號給弄昏了，輸入對象參數的中間還有中括號，是因為輸入題目的參數“各個選項”是一個數組
// 因為是存放于數組中，每個對象之間記得應有逗號分隔
// Remember to place a comma after each object
// in the array except the last

questionsArray = [new Question (2,
  "Which version of Flash first introduced movie clips?",
   ["version 1", "version 2", "version 3",
   "version 4", "version 5", "version 6"]),

   new Question (2,
     "When was ActionScript formally declared a scripting language?",
     ["version 3", "version 4", "version 5"]),

   new Question (1,
     "Are regular expressions supported by Flash 5 ActionScript?",
     ["yes", "no"]),

   new Question (0,
     "Which sound format offers the best compression?",
     ["mp3","aiff", "wav"]),

   new Question (1,
     "True or False: The post-increment operator (++) returns the
     value of its operand + 1.",
     ["true", "false"]),

   new Question (3,
     "Actionscript is based on...",
     ["Java", "JavaScript", "C++", "ECMA-262", "Perl"])];

//// 離開questionsArray.as部分，我們繼續(xù)

// Begin the quiz 出題目！調用makeQuestion函數來完成，我們只需要給這個函數一個參數：題目的編號，函數就會按編號提取數據，結合我們剛才做的模版生成題目。
makeQuestion(currentQuestion);

// Function to render each question to the screen
// 下面就是makeQuestion函數
function makeQuestion (currentQuestion) {

  // Clear the Stage of the last question
  //這句是清理上一題生成的MC，這句從第二題開始生效，questionClip就是題目的MC名，MC從哪來的？看下面就知道了
  questionClip.removeMovieClip();

  // Create and place the main question clip
  // 利用模版questionTemplate生成一個叫questionClip的MC，這個MC就是我們的問題
  attachMovie("questionTemplate", "questionClip", 0);

  // 設定MC的位置
  questionClip._x = 277;
  questionClip._y = 205;

  // 把題目編號輸入MC的qNum文本框中
  questionClip.qNum = currentQuestion + 1;

  // questionsArray[currentQuestion]就是數組questionsArray里的第currentQuestion個對象，例如currentQuestion是0，那么就是我們的第一條題目
  // questionsArray[0].questionText就是第一條題目對象的問題屬性
  // 然后問題輸入MC的qText文本框中
  questionClip.qText = questionsArray[currentQuestion].questionText;

  // Create the individual answer clips in the question clip
  // 以下循環(huán)將結合選項模版生成這一條題目的各個選項的MC

  // questionsArray[currentQuestion].answers記得嗎？選項這個屬性可是個數組，所以我們把它的長度作為循環(huán)的次數，這個數組有多大，我們就生成多少個選項
  for (var j = 0; j < questionsArray[currentQuestion].answers.length; j++) {

    // Attach our linked answerTemplate clip from the Library.
    // It contains a generalized button and a text field for the question.
    // 用answerTemplate做模版生成MC，MC名為"answer" + j ，即第一個選項MC名為answer0，第二個為answer1，選項的名字可是關系到按鈕選什么的，如果你忘了，看看上面有 @@ 標記的地方
    // 同時它們的深度為j，每次不同

    // 但和上面不同的是，我們要把選項MC生成到題目MC里，這樣我們清除題目MC的同時也清除了選項
    // 所以寫成questionClip.attachMovie
    questionClip.attachMovie("answerTemplate", "answer" + j, j);

    // Place this answer clip in line below the question.
    // 設定MC的位置，第一個高度為70，之后順序加15
    questionClip["answer" + j]._y += 70 + (j * 15);
    questionClip["answer" + j]._x -= 100;

    // Set the text field in the answer clip to the appropriate
    // element of this question's answer array.
    // 下面語句的：questionClip["answer" + j]可不是指數組，j=0的時候，它代表questionClip.answer0，具體解釋可見上一章。
    // 這句語句的作用是把questionsArray[currentQuestion]這個對象數組里面的answers[j]數組，輸入到對應的選項MC的answerText文本框中，就是該選項的內容
    questionClip["answer" + j].answerText = questionsArray[currentQuestion].answers[j];
  }
    //生成選項的循環(huán)結束

}

// Function to register the user's answers
// 以下是記錄答題者答案的函數，記錄在數組userAnswers中，和上一例同
// 每一個選項如果被選都會調用此函數，并用參數choice傳來作答的答案
function answer (choice) {
  userAnswers.push(choice);

  // 判斷是否題目全部完成，是的話清楚掉題目MC，并跳轉到quizEnd幀
  if (currentQuestion + 1 == questionsArray.length) {
    questionClip.removeMovieClip();
    gotoAndStop ("quizEnd");
  } else {
    // 在這里改變題目的編號，然后調用makeQuestion函數再次生成新的題目
    currentQuestion++;
    makeQuestion(currentQuestion);
  }
}

// Function to tally the user's score
// 改題的函數
function gradeUser() {
  // Count how many questions the user answered correctly
  for (var j = 0; j < questionsArray.length; j++) {
    // 將答題數組userAnswers[j]與問題數組questionsArray[j]的屬性correctAnswer逐個比較
    if (userAnswers[j] == questionsArray[j].correctAnswer) {
      totalCorrect++;
    }
  }
  // Show the user's score in an onscreen text field
  // 顯示答對與題目數比
  displayTotal = totalCorrect + "/" + questionsArray.length;
}


好了，我們來總結一下這個例子吧
我們已經完成了第三個版本結束時候定下來目標，更快捷的建設，更便易的擴展
我們的題目跟選項都是動態(tài)生成的，也就是說生成10、100題或更多題目也只需要修改questionsArray.as這個文件就可以了
如果說生成兩題這個例子用時要長于上面的例子，那么生成100題，你會發(fā)現用這個例子將是最快的。還有，在100題里面修改其中一題，也是最快的。

看完了例子，希望大家不是只明白了代碼的含義，最重要是理解運用對象來編程的方法
同樣的例子，其實還可以用其他的對象結構來完成的
更有效地組織數據也是編程藝術的一部分

為了更進一步改進我們的例子，最后一個，就是第五個版本，將用XML代替那個存放對象的數組（也就是在questionsArray.as里那個），它實在太難懂了，是不是??？呵呵

最新評論