Xử lý javascript với CSS

#1

E muốn làm làm bài giảng điện tử cho học sinh tiểu học bằng HTML và javascript nhưng đang đang vướng một số khó khăn, rất mong các anh chị chỉ giáo e cách xử lý chúng:

  • Có một câu hỏi và rất nhiều hình. Mình click vào cái hình, nếu đúng thì hình đó sẽ mất đi, một hình mới hiện ra vào đúng chỗ cái hình mình vừa click và một câu hỏi mới lại hiện ra. Nếu sai thì chỉ có thông báo sai.

Hiện tại trường hợp làm sai thì e làm đk nhưng vướng mỗi cái đoạn làm sao để nếu đúng thì ảnh biến mất và ảnh mới hiện ra vào đúng chỗ đó. Các anh chị cho e xin gợi ý cách xử lý vấn đề này với ạ
Em xin cảm ơn!!

#2

thì chỉ cần thay đổi thuộc tính src của thẻ img đó thôi ạ.

#3

Bạn ơi thay đổi như nào vậy? Mình thay đổi thuộc tính CSS trong hàm của javascript như thế nào thế? MÌnh chứ chèn thẻ style rồi cho các thuộc tính mới vào ak?

#4

Có 2 giải phải để làm bài giảng có chứa các câu hỏi trắc nghiệm.

Nếu không phải là 1 ngân hàng câu hỏi thì chỉ cần dùng dữ liệu dạng JSON (hoặc XML, …) để lưu trữ dữ liệu cho các câu hỏi.

Ngược lại nếu muốn xây dựng thành một ngân hàng câu hỏi thì bạn nên xem xét việc sử dụng một CSDL nào đó. VD: Firebase, MongoDB, SQLite, …

Việc xử lý logic đúng sai thì khá dễ thôi nếu đã biết JavaScript rồi (Nếu biết jQuery thì viết sẽ ngắn gọn và dễ hiểu hơn nhiều). Xử lý trường hợp câu trả lời là đúng thì sẽ thực hiện việc load câu hỏi tiếp theo và gán giá trị: câu hỏi, các đáp án, … mới.

Cụ thể thế nào thì bạn có thể tham khảo chức năng của ví dụ sau: jQuery Quiz Plugin

#5

Giả sử bạn có cái code html như vầy: (data-result là biến cho biết hình đó đúng hay sai)

<div>
<div>
   <img class="cauhoi" data-result="true" src="http://i.imgur.com/WQdBPIo.jpg" />
</div>
<div>
   <img class="cauhoi" data-result="false" src="http://i.imgur.com/mf111Rh.jpg" />
</div>
<div>
   <img class="cauhoi" data-result="false" src="http://i.imgur.com/0vVu9OQ.jpg" />
</div>
<div>
   <img class="cauhoi" data-result="true" src="http://i.imgur.com/3Sx0CST.jpg" />
</div>
</div>

Khi click vào 1 hình thì ktra nó hình đó đúng hay sai thì làm cái event như sau:

$( document ).ready(function() {
    $(".cauhoi").click(function() {
        if( $(this).data("result")){ 
              // Nếu hình được chọn là đúng thì thay hình
              $(this).attr('src',"URL hình mới")
        }else{
               // Nếu chọn sai thì thông báo
               alert("No luck this time");
        }
    });
});

Làm như vậy cho đơn giản :blush:

1 Like
#6

MÌnh cảm ơn bạn nhé^^

#7

Mình cảm ơn bạn nhiều nhé.

#8

dùng javascript không thôi thì làm thế này:
ví dụ thẻ img là

<img id="hinhanh" src="http://domain.com/images/img.jpg">

thì code javascript như sau:

document.getElementById("hinhanh").src="http://domain.com/images/hinhmoi.jpg";
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?