<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Chatbot Conversation</h1>
<div class='container'>
<img src="uploads/4-20251004193900.png">
<button onclick="traloi()">Chat</button>
<button id="nut2" onclick="Math()">Math</button>
</div>
<script src="script.js"></script>
</body>
</html>
body {
background-color: #e8c997;
}
.container {
width: 500px;
height: 500px;
background-color:#5e2bb5;
border-radius:20px;
position:relative;
left:200px;
}
img {
position:absolute;
width:300px;
height:auto;
left:100px;
}
button {
position: absolute;
bottom:100px;
left:160px;
width:140px;
height:auto;
font-size:30px;
padding:15px;
background-color:#67f57a;
border-radius:20px;
}
#nut2 {
position: absolute;
bottom:20px;
left:160px;
width:140px;
height:auto;
font-size:30px;
padding:15px;
background-color:#67f57a;
border-radius:20px;
}
// Hàm traloi sẽ hoạt động khi người dùng click vào nút chat
// Biến là 1 đại lượng dùng để lưu trữ giá trị, giá trị có thể thay đổi theo điều kiện khác nhau.
function traloi() {
// tạo popup thông báo
alert('hello');
// Đặt biến và tạo ra 1 popup để nhập tên vào
var name = prompt("what's your name?");
// khi nhập giá trị vô thì name = "giá trị được nhập"
alert('hello, '+name); // Phương pháp truyền biến vào alert
} // ngoặc kết thúc function
function Math() {
// Câu 1
const answer = prompt("Đố bạn, Hôm nay là thứ mấy? (hãy trả lời bằng tiếng Anh)");
if (answer =='Tuesday') {
alert('bạn đã có Đáp án chính xác');
} // ngoặc kết thúc if thứ 1
else {
alert('Đáp án của bạn chưa đúng rồi');
} // ngoặc kết thúc else thứ 1
//Câu 2
}// ngoặc kết thúc function