Bài kiểm tra mã nguồn html

Tìm hiểu từ hơn 300 ví dụ. Với trình chỉnh sửa của chúng tôi, bạn có thể chỉnh sửa CSS và nhấp vào nút để xem kết quả

Chuyển đến ví dụ về CSS

Sử dụng thực đơn

Chúng tôi khuyên bạn nên đọc hướng dẫn này, theo trình tự được liệt kê trong menu

Nếu bạn có màn hình lớn, menu sẽ luôn ở bên trái

Nếu bạn có màn hình nhỏ, hãy mở menu bằng cách nhấp vào ký hiệu menu trên cùng ☰

Mẫu CSS

Chúng tôi đã tạo một số W3 đáp ứng. Các mẫu CSS để bạn sử dụng

Bạn có thể tự do sửa đổi, lưu, chia sẻ và sử dụng chúng trong tất cả các dự án của mình

Mẫu CSS miễn phí

bài tập css

Kiểm tra bản thân với các bài tập

Câu đố về CSS

Kiểm tra kỹ năng CSS của bạn bằng một bài kiểm tra

Bắt đầu bài kiểm tra CSS

Việc học của tôi

Theo dõi tiến trình của bạn với chương trình "Học tập của tôi" miễn phí tại W3Schools

Đăng nhập vào tài khoản của bạn và bắt đầu kiếm điểm

Đây là một tính năng tùy chọn. Bạn có thể học W3Schools mà không cần sử dụng My Learning

Tài liệu tham khảo CSS

Tại W3Schools, bạn sẽ tìm thấy các tham chiếu CSS hoàn chỉnh của tất cả các thuộc tính và bộ chọn với cú pháp, ví dụ, hỗ trợ trình duyệt, v.v.

PHP là ngôn ngữ kịch bản máy chủ và là công cụ mạnh mẽ để tạo các trang Web động và tương tác

PHP là một giải pháp thay thế được sử dụng rộng rãi, miễn phí và hiệu quả cho các đối thủ cạnh tranh như ASP của Microsoft

Bắt đầu học PHP ngay bây giờ »

Học dễ dàng với "PHP Tryit"

Với trình chỉnh sửa "PHP Tryit" trực tuyến của chúng tôi, bạn có thể chỉnh sửa mã PHP và nhấp vào nút để xem kết quả

Thí dụ

echo "Tập lệnh PHP đầu tiên của tôi. ";
?>

Tự mình thử »

Nhấp vào nút "Tự dùng thử" để xem nó hoạt động như thế nào

Bài tập PHP

Kiểm tra bản thân với các bài tập

Tập thể dục

Chèn phần còn thiếu của mã bên dưới để xuất "Xin chào thế giới"

Cung cấp câu trả lời "

Ví dụ PHP

Học bằng ví dụ. Hướng dẫn này bổ sung tất cả các giải thích với các ví dụ rõ ràng

Xem tất cả các ví dụ về PHP

Bài kiểm tra PHP

Học bằng cách làm bài kiểm tra. Bài kiểm tra này sẽ cung cấp cho bạn tín hiệu về mức độ bạn biết hoặc không biết về PHP

Bắt đầu bài kiểm tra PHP

Việc học của tôi

Theo dõi tiến trình của bạn với chương trình "Học tập của tôi" miễn phí tại W3Schools

Đăng nhập vào tài khoản của bạn và bắt đầu kiếm điểm

Đây là một tính năng tùy chọn. Bạn có thể học W3Schools mà không cần sử dụng My Learning

Tài liệu tham khảo PHP

Tài liệu tham khảo PHP của W3Schools chứa các danh mục khác nhau của tất cả các hàm, từ khóa và hằng số PHP, cùng với các ví dụ

Tôi cảm thấy như tôi đã học được hàng tháng trong một tuần. Tôi thích cách Codecademy sử dụng cách học thông qua thực hành và đưa ra những thử thách lớn để giúp người học hiểu một khái niệm và chủ đề mới. Học viên Học viện mật mã Rodrigo @ Vương quốc Anh

Chào mừng đến với blog Codewithrandom. Trong Blog này, chúng tôi tìm hiểu cách tạo ứng dụng đố vui. Chúng tôi sử dụng Html, Css và JavaScript cho ứng dụng đố vui này

Hy vọng bạn thích blog của chúng tôi Hãy bắt đầu với cấu trúc Html cơ bản cho ứng dụng đố vui

 

Mã theoN/ADự án Liên kết tải xuống có sẵn bên dướiNgôn ngữ được sử dụngHTML, CSS và JavaScriptLiên kết ngoài / Phụ thuộcKhông phản hồi CÓBảng ứng dụng câu hỏi

Mã HTML cho ứng dụng đố vui

Question is loading...



Answer...



Answer...



Answer...



Answer...



Submit

Có tất cả mã Html cho ứng dụng đố vui. Bây giờ bạn có thể xem đầu ra mà không cần Css và Javascript. Sau đó, chúng tôi sử dụng CSS để tạo kiểu cho ứng dụng quiz của mình và cung cấp chức năng bằng Javascript trong  ứng dụng quiz

Chơi bài kiểm tra không giới hạn về HTML, CSS và JavaScript – Bấm vào đây

 

Ứng dụng đố vui sử dụng HTML, CSS & JavaScript

 

Hơn 50 dự án Html, Css & Javascript với mã nguồn

Mã CSS cho ứng dụng đố vui

@import url["//fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap"];
* {
box-sizing: border-box;
}
body {
background-color: #b8c6db;
background-image: linear-gradient[315deg, #b8c6db 0%, #f5f7fa 100%];
font-family: "Poppins", sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.quiz-container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba[100, 100, 100, 0.1];
width: 600px;
max-width: 95vw;
overflow: hidden;
}
.quiz-header {
padding: 4rem;
}
h2 {
padding: 1rem;
text-align: center;
margin: 0;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
font-size: 1.2rem;
margin: 1rem 0;
}
ul li label {
cursor: pointer;
}
button {
background-color: #8e44ad;
color: #fff;
border: none;
display: block;
width: 100%;
cursor: pointer;
font-size: 1.1rem;
font-family: inherit;
padding: 1.3rem;
}
button:hover {
background-color: #732d91;
}
button:focus {
outline: none;
background-color: #5e3370;
}

Bây giờ chúng tôi hoàn thành phần CSS của chúng tôi. Đây là đầu ra được cập nhật của chúng tôi Với Html và Css

 

Ứng dụng đố vui sử dụng HTML, CSS & JavaScript

Bây giờ hãy thêm javascript cho câu hỏi và câu trả lời và Tạo Chức năng Câu hỏi

Mã JavaScript cho ứng dụng đố vui

 const quizData = [
{
question: "Which language runs in a web browser?",
a: "Java",
b: "C",
c: "Python",
d: "JavaScript",
correct: "d",
},
{
question: "What does CSS stand for?",
a: "Central Style Sheets",
b: "Cascading Style Sheets",
c: "Cascading Simple Sheets",
d: "Cars SUVs Sailboats",
correct: "b",
},
{
question: "What does HTML stand for?",
a: "Hypertext Markup Language",
b: "Hypertext Markdown Language",
c: "Hyperloop Machine Language",
d: "Helicopters Terminals Motorboats Lamborginis",
correct: "a",
},
{
question: "What year was JavaScript launched?",
a: "1996",
b: "1995",
c: "1994",
d: "none of the above",
correct: "b",
},
];
const quiz = document.getElementById["quiz"];
const answerElements = document.querySelectorAll[".answer"];
const questionElement = document.getElementById["question"];
const a_text = document.getElementById["a_text"];
const b_text = document.getElementById["b_text"];
const c_text = document.getElementById["c_text"];
const d_text = document.getElementById["d_text"];
const submitButton = document.getElementById["submit"];
let currentQuiz = 0;
let score = 0;
const deselectAnswers = [] => {
answerElements.forEach[[answer] => [answer.checked = false]];
};
const getSelected = [] => {
let answer;
answerElements.forEach[[answerElement] => {
if [answerElement.checked] answer = answerElement.id;
}];
return answer;
};
const loadQuiz = [] => {
deselectAnswers[];
const currentQuizData = quizData[currentQuiz];
questionElement.innerText = currentQuizData.question;
a_text.innerText = currentQuizData.a;
b_text.innerText = currentQuizData.b;
c_text.innerText = currentQuizData.c;
d_text.innerText = currentQuizData.d;
};
loadQuiz[];
submitButton.addEventListener["click", [] => {
const answer = getSelected[];
if [answer] {
if [answer === quizData[currentQuiz].correct] score++;
currentQuiz++;
if [currentQuiz < quizData.length] loadQuiz[];
else {
quiz.innerHTML = `
You answered ${score}/${quizData.length} questions correctly
Play Again
` // location.reload[] won't work in CodePen for security reasons;
}
}
}];

Bây giờ chúng tôi hoàn thành Ứng dụng đố vui của mình. Đây là kết quả được cập nhật của chúng tôi với Html, Css và JavaScript. Hy vọng bạn thích Ứng dụng đố vui này bằng HTML, CSS và JavaScript. bạn có thể xem video đầu ra và ảnh chụp màn hình dự án. Xem các blog khác của chúng tôi và thu thập kiến ​​thức về phát triển front-end

Cảm ơn bạn

Hơn 100 dự án JavaScript với mã nguồn [Người mới bắt đầu đến nâng cao]

 

Ứng dụng đố vui sử dụng HTML, CSS & JavaScript

Ứng dụng đố vui sử dụng HTML, CSS & JavaScript

 

Trong bài đăng này, chúng tôi tìm hiểu cách tạo Ứng dụng đố vui bằng HTML, CSS và JavaScript. Nếu chúng tôi đã làm sai hoặc có bất kỳ sự nhầm lẫn nào, vui lòng gửi bình luận để trả lời hoặc giúp bạn học tập dễ dàng