Soạn nội dung câu hỏi động nâng cao

1. Giới thiệu

Ngoài những lựa chọn để soạn các loại câu hỏi theo cấu trúc mà hoc24 đã định nghĩa sẵn, bạn có thể tự soạn các dạng câu hỏi tương tác theo ý tưởng của mình.

Tuy nhiên, để soạn loại câu hỏi này, bạn cần có kiến thức cơ bản về HTML, CSS, khả năng lập trình Javascript và thư viện Jquery.

 Để làm điều này, bạn click vào biểu tượng (1) trên thanh công cụ, sau đó click vào (2) để lập trình câu hỏi động. 

2. Quy tắc lập trình

- Phần tử Zone: Đây là một biến $(element) trong Jquery mà đã được định nghĩa, ta dùng để đổ nội dung vào.

  Ví dụ: Zone.html(" 1 + 1 = ?"); sẽ hiện ra dòng chữ: 1 + 1 = ?

  Để tìm đến một element nào đó trong code html có class là .cls ta dùng lệnh Jquery: Zone.find(".cls");

- Các hàm cần định nghĩa:

   + p.makeQuestion = function(){}: Hàm này để lập trình tạo ra câu hỏi

   + p.check = function(){}: Hàm này để lập trình kiểm tra kết quả, trả về 2 giá trị là answer (câu trả lời của người dùng) và result (kết quả đúng/sai), trong đó:

            result = 2: Chưa trả lời;   result = 1: Đúng;   result = 0: Sai.

            Kết quả trả về được viết theo quy tắc: return result([answer, result]); hoặc return {answer: answer, result: result}

   + p.makeCorrect() = function(){}: Hàm này để hiển thị ra đáp án đúng.

   + p.makeHistory() = function(){}: Hàm này để hiển thị lại câu hỏi và nội dung người dùng đã trả lời. Nội dung người dùng đã trả lời được gán trong biến p.answer

   + p.makeExp() = function(){}: Hàm này hiển thị hướng dẫn giải cho câu hỏi. Tuy nhiên, nếu vẫn làm hướng dẫn giải theo kiểu cũ thì hệ thống sẽ ưu tiên hiển thị hướng dẫn kiểu cũ trước.

3. Ví dụ mẫu: 

Bài toán thực hiện phép tính cộng thì code Javascript như sau:

p.a = random(1,10);
p.b = random(1,10);
params({a: p.a, b:p.b});
p.html = p.a + " + " + p.b + " = " + "<input type = 'text' name = 'kq' class = 'kq'>";
p.da = p.a + p.b;
p.makeQuestion = function(){
  Zone.html(p.html);
}
p.check = function()
{
  ans = Zone.find(".kq").val();
  re = 0;
  if(ans == "") re = 2;
  else if(ans == p.da) re = 1;
  else re = 0;
  return result([ans,re]);
}
p.makeCorrect = function(){
  Zone.html(p.html);
  Zone.find(".kq").val(p.da);
}
p.makeHistory = function(){
  ann = p.answer;
  Zone.html(p.html);
  Zone.find(".kq").val(ann);
}

p.makeExp = function(){

  Zone.html("Lấy que tính ra để đếm");

}

Câu hỏi được hiển thị ra như sau: