Bài kiểm tra sau cung cấp Câu hỏi trắc nghiệm [MCQ] liên quan đến CSS. Bạn sẽ phải đọc tất cả các câu trả lời đã cho và nhấp vào câu trả lời đúng. Nếu bạn không chắc chắn về câu trả lời thì bạn có thể kiểm tra câu trả lời bằng nút Hiển thị câu trả lời. Bạn có thể sử dụng nút Câu hỏi tiếp theo để kiểm tra bộ câu hỏi mới trong bài kiểm tra
Câu trả lời. Đ.
Giải trình
Tất cả các phương án trên đều đúng
Câu trả lời. C
Giải trình
p[lang~="fr"] − Chọn tất cả các thành phần đoạn có thuộc tính lang chứa từ "fr"
Câu trả lời. Đ.
Giải trình
Tất cả các phương án trên đều đúng
Câu trả lời. b
Giải trình
Thuộc tính nền được sử dụng làm tốc ký để chỉ định một số thuộc tính nền khác
Câu trả lời. b
Giải trình
Thuộc tính text-align được sử dụng để căn chỉnh văn bản của tài liệu
Câu trả lời. Đ.
Giải trình
Thuộc tính text-transform được sử dụng để viết hoa văn bản hoặc chuyển đổi văn bản thành chữ hoa hoặc chữ thường
Câu trả lời. Một
Giải trình
Thu gọn đường viền chỉ định xem trình duyệt có nên kiểm soát sự xuất hiện của các đường viền liền kề chạm vào nhau hay mỗi ô có nên duy trì kiểu của nó hay không
Chúng tôi sẽ xây dựng một ứng dụng bài kiểm tra bằng JavaScript, HTML và CSS trong bài đăng trên blog này. Các câu hỏi trắc nghiệm trong ứng dụng bài kiểm tra đơn giản này cần bạn chọn một trong các câu trả lời có thể. Trang kết quả sau đó sẽ được hiển thị. Công việc này sẽ được hoàn thành bằng JavaScript, một ngôn ngữ mạnh mẽ cho phép mọi thứ
Mã bởiN/ATải xuống dự ánN/Ngôn ngữ được sử dụng HTML, CSS và JavaScript Liên kết bên ngoài / Phụ thuộc Không phản hồi CÓBảng câu hỏi trắc nghiệm nhiều lựa chọn
Chơi bài kiểm tra không giới hạn về HTML, CSS và JavaScript – Bấm vào đây
Như bạn đang tìm kiếm trong bản xem trước dự án, mọi thứ được tổ chức như thế nào
Sau đây là tính năng của dự án của chúng tôi. -
- We have arranged the Questions and options in the list format using the
- tag.
- Sau đó, chúng tôi đã đặt tùy chọn bằng cách sử dụng nhịp và xác định nút radio và đưa ra giá trị phù hợp
- Và cuối cùng, chúng tôi đã xác định một nút có sự kiện nhấp chuột và phần nhịp để hiển thị kết quả
Bài kiểm tra trắc nghiệm mã HTML
Bây giờ tôi sẽ bảo bạn xác định cấu trúc bằng HTML. Không phải từ đầu, chỉ là mã nằm dưới thẻ body
Chúng tôi có phần sau trong phần HTML
Portfolio Website Sử Dụng HTML CSS Và JAVASCRIPT [ Mã Nguồn]
- Đầu tiên, chúng tôi gọi lớp ul mà chúng tôi đã định nghĩa lớp là một bài kiểm tra
- Then using the
- tag we have set our question in the
tag.
- Sau đó, chúng tôi đã sử dụng thẻ nhãn và gọi nút radio được cung cấp giá trị và sử dụng span, chúng tôi đã đưa ra câu trả lời
- Tương tự, chúng tôi đã làm điều này cho tất cả các tùy chọn và cho tất cả các câu hỏi
- Đi qua đoạn mã dưới đây và chạy nó trong IDLE của chúng tôi trước khi CSS Styling
-
How many letters are there in "JS"?
- 2
- 1
- 3
- 4
-
How many letters are there in "BMX"?
- 2
- 1
- 3
- 4
-
How many letters are there in "A"?
- 2
- 1
- 3
- 4
đầu ra
Phần CSS.
Bằng thiết kế CSS, chúng tôi sẽ thiết kế toàn bộ trang của mình, đây chỉ là một bài kiểm tra nên chúng tôi sẽ chỉ thêm màu nền, màu cho nút và họ phông chữ cho toàn bộ nội dung
Và đặt phần đệm của các câu hỏi và tùy chọn để nó không bị lộn xộn và trông theo thứ tự có hệ thống
Hơn 10 ý tưởng dự án Javascript cho người mới bắt đầu [Mã nguồn dự án]
Việc phân tích sẽ được hỗ trợ bởi mã CSS bên dưới. Sau khi thêm tệp này vào thẻ rel liên kết của bạn, hãy đợi kết quả.
Chúng tôi sẽ thêm một số kiểu dáng cơ bản vào ứng dụng bài kiểm tra của mình bằng cách sử dụng bộ chọn mặc định và chúng tôi sẽ thêm kiểu dáng cho các thành phần ứng dụng bài kiểm tra khác nhau bằng cách sử dụng bộ chọn lớp. Ứng dụng bài kiểm tra của chúng tôi sẽ có lề và phần đệm.
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: sans-serif;
padding: 1rem;
background-color: orange;
}
.quiz,
.choices {
list-style-type: none;
padding: 0;
}
.choices li {
margin-bottom: 5px;
}
.choices label {
display: flex;
align-items: center;
}
.choices label,
input[type="radio"] {
cursor: pointer;
}
input[type="radio"] {
margin-right: 8px;
}
.view-results {
padding: 1rem;
cursor: pointer;
font-size: inherit;
color: white;
background: teal;
border-radius: 8px;
margin-right: 5px;
}
.my-results {
padding: 1rem;
border: 1px solid goldenrod;
}
đầu ra
Phần Javascript
Trong phần JavaScript, chúng tôi sẽ thêm logic để khởi tạo trang của chúng tôi. Logic phải biết điều gì là đúng và sai, Vì vậy, chúng tôi sẽ xác định tùy chọn chính xác ở đó và sau đó chúng tôi sẽ đặt khi người dùng nhấp vào nút, logic sẽ tạo và cho người dùng biết về điểm số của họ
5+ dự án HTML CSS với mã nguồn
Mã JavaScript bên dưới 👇sẽ cho bạn biết về logic này liên kết mã này trong thẻ src script của Mã HTML của bạn
var answers = ["A", "C", "B"],
tot = answers.length;
function getCheckedValue[radioName] {
var radios = document.getElementsByName[radioName];
for [var y = 0; y < radios.length; y++]
if [radios[y].checked] return radios[y].value;
}
function getScore[] {
var score = 0;
for [var i = 0; i < tot; i++]
if [getCheckedValue["question" + i] === answers[i]] score += 1;
return score;
}
function returnScore[] {
document.getElementById["myresults"].innerHTML =
"Your score is " + getScore[] + "/" + tot;
if [getScore[] > 2] {
console.log["Bravo"];
}
}
Thông qua blog này, chúng tôi đã học cách thiết kế Bài kiểm tra trắc nghiệm bằng HTML, CSS & JavaScript
Kết quả cuối cùng
https. //www. codewithrandom. com/wp-content/uploads/2022/08/Untitled-6. mp4
Bây giờ tôi đang tìm kiếm một số đánh giá tích cực từ phía bạn
Vì vậy, Làm thế nào là blog Người học,
Nếu bạn muốn blog thú vị hơn như thế này thì vui lòng kiểm tra các trang Blog của chúng tôi. Hãy theo dõi vì mỗi ngày bạn sẽ học được điều gì đó mới ở đây
Tôi hy vọng rằng tôi có thể giúp bạn hiểu chủ đề này và bạn đã học được điều gì đó mới từ blog này. Nếu bạn gặp bất kỳ khó khăn nào, vui lòng liên hệ với chúng tôi với sự trợ giúp của hộp bình luận và nếu bạn thích nó, hãy thể hiện tình yêu của bạn trong phần bình luận. Điều này lấp đầy trái tim của các blogger với sự nhiệt tình để viết thêm blog mới