<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Chatbot Conversation</h1>
<div class='container'>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrZyGrIKS8PClbScQvLXMl4q4M7S5pwEPtQQ&s">
<button onclick='traloi()'>Chat</button>
<button id='Math' onclick='Math()'>Math</button>
</div>
<script src="script.js"></script>
</body>
</html>
body {
background-color:#44d4db;
}
.container {
width: 500px;
height: 500px;
background-color:#5e2bb5;
border-radius:20px;
position:relative;
left:100px;
}
img {
position:absolute;
top:50px;
width:300px;
height:auto;
left:100px;
}
button {
position: absolute;
bottom:100px;
left:160px;
width:140px;
height:auto;
font-size:30px;
padding:20px;
background-color:#67f57a;
border-radius:20px;
}
#Math {
position: absolute;
bottom:10px;
left:160px;
width:140px;
height:auto;
font-size:30px;
padding:20px;
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
var AI = prompt("How're you today");
alert(Al + " and you?");
var Al = prompt("Me too, thank you");
} // ngoặc kết thúc function
function Math() {
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('Tuesday');
} // ngoặc kết thúc if thứ 1
else {
alert('Wednesday');
} // ngoặc kết thúc else thứ 1
//cau 2
const answer2 = prompt("Đố bạn, 30+12 bằng bao nhiêu? (hãy trả lời bằng tiếng Anh)");
if (answer2 =='42') {
alert('Bạn đã có đáp án chính xác!');
} // ngoặc kết thúc if thứ 2
else {
alert('Đáp án của bạn chưa đúng');
} // ngoặc kết thúc else thứ 2
}// ngoặc kết thúc function