Cách soạn nội dung câu hỏi động

1. Câu hỏi tĩnh, câu hỏi động

- Câu hỏi tĩnh là câu hỏi mà các tham số của nó được đặt cố định. Ví dụ: 3 + 5 = ? thì 3 và 5 là cố định.

- Câu hỏi động là câu hỏi mà các tham số của nó được sinh ra ngẫu nhiên. Ví dụ: x + y = ? thì x và y được hệ thống sinh ra ngẫu nhiên, mỗi lần làm lại câu hỏi này thì sẽ có một giá trị khác.

2. Tạo câu hỏi động bằng cách nào

- Các câu hỏi động được biên soạn dựa trên ngôn ngữ lập trình Javascript, đã được hoc24 tích hợp vào bộ công cụ soạn thảo câu hỏi.

- Một câu hỏi động gồm 2 phần:

   + Phần nội dung câu hỏi.

   + Phần mã lập trình.

- Để nhập vào mã Javascript, ta click vào biểu tượng trên thanh công cụ như hình vẽ sau:

   

   Sau khi click vào biểu tượng trên, một cửa sổ hiện ra, ta chọn ngôn ngữ là Javascript rồi soạn mã lệnh vào trong đó.

3. Quy ước viết mã Javascript

- Đặt tên biến: Các biến được đặt theo quy tắc là p.tên biến.

   Ví dụ: p.a, p.b, p.c (lưu ý không có khai báo var trước tên biến)

- Hàm sinh số ngẫu nhiên: random(a, b) là hàm sinh một số ngẫu nhiên từ a đến b.

- Biến ngẫu nhiên: Là biến được định nghĩa bởi hàm sinh số ngẫu nhiên. 

   Ví dụ: p.a = random(1,10); p.b = random(p.a, 20);

- Khai báo biến ngẫu nhiên: Tất cả các biến ngẫu nhiên cần được khai báo, theo quy tắc sau: params({bien1: p.bien1, bien2: p.bien2});

   Ví dụ: params({a: p.a, b: p.b});

- Các biến được gọi ra ở phần nội dung câu hỏi thì đặt trong cặp ký tự @@

   Ví dụ:  @p.a@, @p.b@

- Lưu ý: 

   + Các biến ngẫu nhiên cần được khởi tạo đầu tiên.

   + Sau khi khởi tạo biến ngẫu nhiên, cần thực hiện khai báo các biến ngẫu nhiên bằng hàm params().

   + Mọi tính toán, biến đổi phải thực hiện sau khai báo params. 

   + Biến p.now lấy thời gian (theo ms) tại thời điểm sinh ra câu hỏi, dùng để định danh class tránh trùng nhau trong các thẻ, ví dụ: <div class = 'test@p.now@'>Test</div>

4. Một số hàm được định nghĩa sẵn

- random(a, b): Sinh ra cặp số ngẫu nhiên từ a đến b.

- randomArray(n, a, b): Hàm sinh ra một mảng gồm n phần tử khác nhau thuộc đoạn [a, b].

- img(src, width, height): Hàm hiển thị 1 hình ảnh có đường dẫn ảnh là src, chiều rộng width, chiều cao height (chỉ cần đặt chiều rộng, chiều cao sẽ tự điều chỉnh theo đúng tỉ lệ)

- imgs(n, src, width, height): Hàm hiển thị n hình ảnh có đường dẫn ảnh là src.

- shuffle(array): Hàm đảo vị trí ngẫu nhiên các phần tử trong mảng array.

(Update 06/08/2018)

getDigits(n): Hàm chuyển một số thập phân theo chuẩn quốc tế sang chuẩn Việt Nam, ví dụ: 3.14  thành 3,14

rpsNum(n): Hàm chuyển 1 số có nhiều chữ số sang dạng phân cách dấu, ví dụ: 1234567 thành 1,234,567

- compare(m,n): Hàm so sánh 2 số, trả về 1 mảng với phần tử đầu tiên của mảng là kí hiệu mô tả đúng so sánh giữa m và n. Ví dụ: compare(3,4) sẽ trả về mảng ['<','=','>'];

- getRound(x, n): Hàm làm tròn đến n chữ số của phần thập phân của biến x

- equalEq(bt1, bt2): Hàm kiểm tra xem 2 biểu thức có bằng nhau hay không, ví dụ kiểm tra "3" = "6/2"; hoặc "3x" = "2x+1",....

5. Vẽ Canvas

Để vẽ canvas trong câu hỏi thì ta làm như sau:

- Đặt mã HTML sau vào vị trí cần vẽ: <canvas class="hinh1"></canvas>

- Trong môi trường lập trình Javascript ta khai báo như sau:

   + Tạo bảng vẽ:  canvas = setCanvas(width, height);

   + Thiết lập chế độ vẽ: cxt = canvas.getContext("2d");

   +  Thực hiện các thao tác vẽ

   +  Vẽ hình: drawCanvas('hinh1', canvas); // Thao tác này sẽ vẽ canvas vào thẻ <canvas> ở trên theo định danh class là "hinh1"

Hướng dẫn vẽ HTML5 Canvas

6. Xử lý sự kiện

- Trong trường hợp cần lập trình câu hỏi động có tương tác trong câu hỏi, cần gọi đến các sự kiện như click chuột, ấn phím, ... thì các sự kiện được gọi như sau:

    p.event = function(Zone){ Zone.find(phần tử).sự kiện }

- Ví dụ: Sự kiện click chuột vào một phần tử chứa class ".test"

   p.event = function(Zone){

      Zone.find(".test").on("click", function(){

           alert("Đã click chuột");

      }); 

   }

7. Một số thiết lập khi soạn câu hỏi

- Không trộn thứ tự câu hỏi: p.shuffle = 0;

- Hiển thị điều khiển của Audio player: p.audoControl = 'show';

- Câu hỏi trắc nghiệm có biểu tượng radio hoặc check box ở đầu: p.withSelect = true;

- Câu hỏi trắc nghiệm có biểu tượng ABC phía trước: p.withSelectX = 'abc';

8. Ví dụ

Ví dụ bài toán thực hiện phép tính cộng.