Hướng Dẫn Tạo Ứng Dụng Quiz với Angular: Từ Ý Tưởng đến Hiện Thực

Giới Thiệu

Chào các bạn! Mình là Luân, và trong bài viết này, mình muốn chia sẻ về quá trình tạo ra một ứng dụng trắc nghiệm nhỏ bằng Angular. Thời gian gần đây, mình thấy nhiều bài trắc nghiệm thú vị và đã quyết định thử sức với việc phát triển một ứng dụng riêng cho mình. Vậy, hãy cùng bắt tay vào xây dựng ứng dụng quiz này nhé!

1. Phác Thảo Ý Tưởng

Mục tiêu của ứng dụng là cho phép người dùng chọn lĩnh vực thi và số lượng câu hỏi. Ứng dụng sẽ tự động tạo một đề thi tương ứng để người dùng thực hiện và xem kết quả ngay sau đó.

2. Định Hình Công Nghệ

Để phát triển ứng dụng này, mình đã chọn Angular vì sự quen thuộc của mình với nó. Dữ liệu sẽ được lưu trữ trong các file JSON. Mặc dù nhiều bạn có thể thắc mắc tại sao không dùng cơ sở dữ liệu, nhưng lý do là việc này nhanh chóng và tiện lợi hơn. Nếu sau này có nhu cầu phức tạp hơn, mình có thể dễ dàng triển khai một database và backend API vào sau.

3. Bắt Tay Vào Code

Cấu trúc dữ liệu JSON trắc nghiệm sẽ như sau:

[
    {
        "title":"What is a key characteristic of specification-based testing techniques?",
        "options":[
             "Tests are derived from information about how the software is constructed.",
             "Tests are derived from models (formal or informal) that specify the problem to be solved by the software or its components.",
             "Tests are derived based on the skills and experience of the tester.",
             "Tests are derived from the extent of the coverage of structural elements of the system or components."
        ],
        "answer":""
    }
]

Trong đó, title là tiêu đề câu hỏi, options là các phương án trả lời và answer sẽ chứa đáp án đúng.

4. Các Giai Đoạn Phát Triển

Ứng dụng sẽ có 3 màn hình tương ứng với 3 giai đoạn gồm: Cài đặt, Thi và Xem Kết Quả.

Giai Đoạn 1: Cài Đặt

Chúng ta sẽ thiết kế giao diện cài đặt nơi người dùng có thể lựa chọn lĩnh vực và số lượng câu hỏi.

Giai Đoạn 2: Thi Trắc Nghiệm

Khi bấm nút bắt đầu, ứng dụng sẽ trộn ngẫu nhiên mảng câu hỏi đã chuẩn bị trước và giới hạn số lượng câu hỏi dựa trên lựa chọn của người dùng. Dưới đây là cách thức thực hiện:

start() {
   const shuffle = (array: string[]) => { 
     for (let i = array.length - 1; i > 0; i--) { 
       const j = Math.floor(Math.random() * (i + 1)); 
       [array[i], array[j]] = [array[j], array[i]]; 
     } 
     return array; 
   }; 
   this.datas = shuffle(this.datas);
   if (this.numOfQuestion > this.datas.length) {
     this.numOfQuestion = this.datas.length;
   }
   this.from = 0;
   this.mode = 2;
   this.questions = [];
   this.answers = [];
   for (let i = 0; i < this.numOfQuestion; i++) {
     this.datas[i].options = shuffle(this.datas[i].options);
     this.questions.push(this.datas[i]);
     this.answers.push({
       key: this.datas[i].title,
       value: ""
     });
   }
   this.limit = (this.numOfQuestion < this.from + 5) ? this.numOfQuestion : this.from + 5;
}

Mảng answers sẽ lưu lại các câu trả lời mà người dùng đã chọn.

Giai Đoạn 3: Xem Kết Quả

Cuối cùng, khi người dùng hoàn thành bài thi, ứng dụng sẽ hiển thị các câu trả lời và so sánh với đáp án đúng, giúp người dùng biết họ đã chọn đúng hay sai.

Các bạn có thể xem mã nguồn và chạy thử ứng dụng trên GitHub của mình: angular-quiz-app. Chúc các bạn thành công trong việc tạo ra ứng dụng của riêng mình!
source: viblo