Mình đã mô phỏng lại bài thi IELTS Writing trên máy tính bằng lập trình cơ bản
Rất hay và hữu ích!/7 người
6 thángBình luận: 29
Mình đã mô phỏng lại bài thi IELTS Writing trên máy tính bằng lập trình cơ bản
Mình biết lập trình bằng Javascript, sau lần thi IELTS trên máy tính, mình đã về và thử viết code để mô phỏng lại bài thi IELTS Writing để học viên mình làm quen với format đề thi.

*Đây không phải bài hướng dẫn lập trình, mình chỉ giải thích ý tưởng và cách mình làm ra một sản phẩm phục vụ công việc và cuộc sống sử dụng kiến thức lập trình mình học được.

Form thi viết luận trên máy tính của IELTS

format.png


Chúng ta sẽ có:
  1. Tiêu đề và yêu cầu ở trên
  2. Đề bài ở bên trái
  3. Phần làm bài bên phải
  4. Phần đếm số từ tự động bên dưới ô làm bài

Quảng cáo


Khi đi thi thì chúng ta sẽ không thu nhỏ chương trình để Google được nha :v, không có nút nộp bài, không copy paste được luôn, có đồng hồ đếm giờ, hết giờ nó sẽ tự động nộp. Thời điểm thi mình cũng biết một chút cơ bản về HTML, CSS và Javascript, nên nảy ra ý tưởng code lại form này cho học viên làm quen.

Visual Studio Code (VS Code)

Đây là phần mềm chuyên dụng để lập trình do Microsoft phát hành, các bạn có thể tải tại đây. Về setup ban đầu để sử dụng, mời các bạn xem qua video này:



Đây là kênh lập trình mình xem nhiều và thường xuyên nhất, bác này nói tiếng Anh rất dễ nghe, mọi người xem tiện luyện tiếng Anh luôn ^^

Màn hình nhập email

Mình có giải thích về HTML và CSS sơ lược tại bài này, mọi người xem nhé: https://tinhte.vn/thread/tu-lam-game-khong-qua-kho-biet-co-ban-lap-trinh-tre-em-cung-lam-duoc.3440017/

Tự làm Game | Không quá khó - Biết cơ bản lập trình trẻ em cũng làm được

Đầu tiên mời mọi người chơi thử game tại đây nhé: Tinhte Squid Game. Mình cá là mấy bạn sẽ chết trong lần đầu tiên chơi =)) Nhiệm vụ là giúp Huyền Vân qua được vạch đỏ mà không bị Boss Cu Hiệp loại ---------- Hôm nay mình xin chia sẻ cách mình…
tinhte.vn



Video cơ bản làm quen với HTML, CSS, Javascript
HTML Crash Course In 30 Minutes
CSS Crash Course In 30 Minutes
JavaScript Tutorial For Beginners

Quảng cáo


*Phần này mình chỉ minh họa phần code đơn giản cho sinh động, không đi quá chi tiết nhé ^^
ielts-form-1.jpg
Đầu tiên mình muốn tạo màn hình để học viên nhập mail vào → bấm nút bắt đầu → đề hiện ra
  • email được thu thập để mình gửi bài chấm cho học viên sau khi chấm xong
ielts-form-2.jpg
Tô nền bằng CSS

ielts-form-3.jpg
Thiết lập thông số cho phần tiêu đề bằng CSS
  • màu chữ
  • độ cao của khung
  • màu chữ
  • cỡ chữ
  • loại font chữ
  • độ cong của viền
  • khoảng cách giữa các dòng chữ

ielts-form-4.jpg
Mình thêm HTML:
  • Nút Bắt đầu làm bài → trong code là đoạn <button> … </button>
  • Phần ô nhập email → trong code là <input … >
  • Phần có chữ countdown là đồng hồ tính giờ được ẩn đi, khi bấm nút Bắt đầu nó mới hiện ra
  • Phần nút có lệnh onclick nghĩa là khi bấm vào nó sẽ chạy lệnh có tên start()

Quảng cáo


Màn hình làm bài

Screen Shot 2022-02-20 at 20.11.28.png


Khi người dùng ấn nút, lệnh start() sẽ được kích hoạt:
  • Nút Bắt đầu làm bài, ô nhập email bị ẩn đi → phần countdown mình nhắc đến lúc nãy hiện ra và bắt đầu đếm ngược.
  • Phần đề bài bên trái, ô nhập bài làm bên phải hiện ra.
  • Bên dưới khung làm bài là phần đếm từ giống thi thật, cho phép thí sinh theo dõi số từ đã viết được (yêu cầu tối thiểu cho phần này là phải viết hơn 250 từ)

Phần khó nhất là hai chức năng đồng hồ đếm ngược và đếm số từ, tất nhiên khả năng của mình khi đó không đủ để tự viết ra hai phần này, mình tìm phần code Javascript có chức năng mình muốn trên stackoverflow.com rồi tinh chỉnh lại cho phù hợp với chương trình.

Screen Shot 2022-02-20 at 22.13.16.png
Code phần đồng hồ đếm ngược, phần timeleft = 2700 → đồng hồ sẽ đếm ngược 45 phút

Screen Shot 2022-02-21 at 11.28.07.png
Chức năng đếm số từ mình tìm được trên stackoverflow.com

ielts-form-5.jpg
Mình cũng khóa chức năng copy và paste của ô làm bài để người học không thể copy từ nơi khác paste vào được, chỉ có thể tự gõ ra.

Gửi kết quả vào Google Sheet

ielts-form-6.jpg


Khi hết giờ làm bài, hệ thống sẽ gửi bài làm về file Google Sheet thông qua một file Google Form mình tạo sẵn, cơ chế chỉ đơn giản là file index.html của mình sẽ tự điền Google Form rồi tự động nhấn submit để gửi.

Kết

Như vậy là với kiến thức lập trình cơ bản + kỹ năng tìm kiếm (Google, stackoverflow), mình đã tạo ra được một công cụ giúp học viên có thể làm quen với format thi IELTS máy tính. Làm chừng 5 bài kiểm tra như vậy thì vô phòng thi sẽ đỡ căng thẳng hơn rất nhiều.


Nếu mọi người thích dạng bài viết tạo ra công cụ hữu ích từ lập trình cơ bản như này, comment cho mình biết nha. ^^
29 bình luận
Ngon
Hay anh ạ
clltesterr
ĐẠI BÀNG
6 tháng
đã
Xa rời lập trình java hơn 20 năm giờ nó biết tui chứ tui ko nhớ nó 😆
@Bão Xì Phố Bạn viết bài dùng Javascript mà, haha
freedom95
ĐẠI BÀNG
6 tháng
@Bão Xì Phố Cụ đã năm nay bao nhiêu tuổi, mà đã xa rời JAVa được 20 năm rồi ạ?
jedi9
TÍCH CỰC
6 tháng
@freedom95 8X đời đầu với giao thời AWT và Swing =))
duong113
ĐẠI BÀNG
6 tháng
có dùng thử được không anh? em cũng đang ôn thi ielts hì.
heheh, mod mày mò vui ghê 😃
thinkpark
ĐẠI BÀNG
6 tháng
Ngưỡng mộ bạn. Mình cũng đang mày mò những cái cơ bản về lập trình đây.
'Chức năng đếm số từ mình tìm được trên stackoverflow.com '
ko nên có countdown
thí sinh đều fai tự đem đồng hồ
anh làm kiểu này mấy em có thói quen thì ko hay 😁
@kixx Thi thật có nha bạn, mình chỉ mô phỏng lại thôi ^^
cốt lõi là ngân hàng câu hỏi. Còn bộ khung có 1 tỉ app support sẵn
ductech0
TÍCH CỰC
6 tháng
Rất thú vị ạ!
Hay quá
hay quá, tự học tự làm như Quang là quá giỏi!
Giỏi quá bác! Em tính thi IELTS trên máy để tận dụng copy-paste mà giờ biết ko có tính năng này...
Blue Pine
ĐẠI BÀNG
6 tháng
@littlecrabvt Copy - paste được bình thường nha bạn 😁
Nhìn hay. Nếu có mấy tools kiểu này chắc là mình sẽ chịu khó làm writing hơn (và chắc được cao hơn là 6.5 viết 😆 ).
Giỏi quá bác. Nếu đc bác nên đọc thêm về căn bản & chú ý mấy điểm như vầy:
- Trong js trừ trường hợp bắt buộc thì nên xài quote thay cho double quote. Nếu đã xài quote thì xài cho consitent, ko nên lúc quote, lúc khác lại double quote.
- Nên xài !== hoặc === thay vì != hoặc ==

Chúc bác học lập trình vui.
@chuong.dang Hay quá, em sẽ lưu ý ạ.
CHAUDVB
ĐẠI BÀNG
6 tháng
@chuong.dang để consitent như bạn này nói thì chủ thớt có thể cài thằng eslint hay mấy thằng tương tự để nó auto format về đúng dạng mình muốn khi nhấn save.
Thắc mắc ở phần chặn copy paste người dùng mở dev tool xoá mấy cái chặn copy paste thì xử lý kiểu gì
@Bùi Minh Phúc Mình có code report nếu phần Word count tăng lên số lượng quá nhiều trong thời gian ngắn ^^
ntdat3011
ĐẠI BÀNG
6 tháng
bác có thể cân nhắc bỏ lên github để lưu trữ source và share cho những người có nhu cầu như vậy nếu thích
Blue Pine
ĐẠI BÀNG
6 tháng
Hay quá bác, mình là một trong những người đầu tiên được tiếp xúc với bài thi IELTS trên máy tính nên rất phục tâm huyết của bác! Góp ý xíu là tính năng copy - paste là có trên bài thi máy tính thật nha 😁
Hay quá ạ








  • Chịu trách nhiệm nội dung: Trần Mạnh Hiệp
  • © 2022 Công ty Cổ phần MXH Tinh Tế
  • Địa chỉ: Số 70 Bà Huyện Thanh Quan, P. Võ Thị Sáu, Quận 3, TPHCM
  • Số điện thoại: 02862713156
  • MST: 0313255119
  • Giấy phép thiết lập MXH số 11/GP-BTTTT, Ký ngày: 08/01/2019