Designing a Simple Question Paper UI with HTML and CSS
Introduction
An essential part of any educational web application is an effective UI question paper because it allows the student clearly and in an organized manner to interact with the assessment material. In this blog post, I describe my experience of designing a Question Paper UI purely in HTML/CSS. The focus of this project will be simplicity, though users will be able to learn how to implement their own watermark in the background to give it a professional outlook.
.png "Question Paper UI Design - Powered by FreeProjects1")
Project Overview
The objective of this project was the development of a simple Question Paper UI that would present questions in a readable manner. Considering the necessities of only HTML and CSS, it means the design is accessible even to a beginner as well, yet still functional and aesthetic.
Features of the Question Paper UI
- The layout must be clean and structured
- The design of the UI has made it very readable and easy to navigate through each set of questions. This is due to the good numbering of each question and varieties of multiple-choice options, thus clarifying the system.
Custom Watermark:
This design allows for a custom watermark. This can be achieved through CSS so that users make an individualized question paper and yet appear professional.
Responsive Design:
Although the focus is on using HTML and CSS, media queries have been used to make the design responsive so that the question paper is appearing correctly on all screen sizes, from desktops to mobile devices.
Accessibility
All features of accessibility have been used in the design; one of them includes semantic HTML elements so that all users can work interchangeably with the question paper.
Technical Implementation
HTML Structure:
The semantic HTML elements are used for structuring the question paper. Each question has been properly wrapped with tags in such a way that it is accessible while being understandable.
CSS Styling:
Custom styles for the graphic-themed UI enhancements, including typography, colors, and spacing suited for the educational themes. The watermark is added using CSS properties such as background-image and opacity, which would nicely blend with the background.
Example Code
Here is a simplified example of how the HTML and CSS, JavaScript can be formatted:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Question Paper UI Design | FreeProjects1</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="btn-box btn-section">
<button class="btn">Switch</button>
</div>
<div class="section que-section">
<img src="bg.png" alt="" />
<h1>Dhaked Institute - FreeProjects1</h1>
<h2>Question Paper</h2>
<p>
<span id="date">Date: </span> <span id="time">Time: 1:30 Hr</span>
</p>
<div class="box">
Q.1 What does HTML stand for?
<ol>
<li>Hypertext Markup Language</li>
<li>Hyperlink and Text Markup Language</li>
<li>Hypertext Multi-Language</li>
<li>Hyperlink Text Markup Language</li>
</ol>
</div>
<!-- --- -->
<p class="copyright">
Writer:
<a href="https://github.com/bholu-singh/" target="_blank"
>Bholu Singh
</a>
</p>
</div>
<div class="section ans-section">
<img src="bg.png" alt="" />
<h1>Dhaked Institute - FreeProjects1</h1>
<h2>Answer Sheet</h2>
<p>
<span id="date">Date: </span> <span id="time">Time: 1:30 Hr</span>
</p>
<div class="box">
Q.1 What does HTML stand for?
<ol>
<li>Ans. Hypertext Markup Language</li>
</ol>
</div>
<!-- --- -->
<p class="copyright">
Writer:
<a href="https://github.com/bholu-singh/" target="_blank"
>Bholu Singh</a
>
</p>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body::-webkit-scrollbar{
width: 0;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #ccc;
}
.container.active .ans-section {
display: flex;
flex-direction: column;
}
.container.active .que-section {
display: none;
}
.btn-box {
position: absolute;
top: 10px;
right: 10px;
z-index: 99999;
}
.btn-box button {
border: none;
outline: none;
padding: 8px 20px;
border-radius: 2px;
background: tomato;
color: #fff;
letter-spacing: 0.3px;
cursor: pointer;
user-select: none;
transition: 0.3s ease;
}
.btn-box button:active {
transform: scale(0.9);
transition: 0.3s ease;
}
.section {
position: relative;
width: 800px;
height: auto;
margin: 5rem 5px 3rem;
padding: 12px;
padding-top: 30px;
background: #eee;
border-radius: 10px;
box-shadow: 0 0 30px rgba(0,0,0,0.4);
}
.container .section img{
width: 90%;
height: auto;
position: absolute;
top: 50%;
left: 5%;
transform: translate(-50%, -50%);
transform: rotate(-45deg);
opacity: 0.04;
}
.container .section h1, .container .section h2{
text-align: center;
margin: 15px auto 15px;
}
.container .section p{
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 2% 2% 2%;
font-size: 0.9rem;
}
.container .section .box{
width: 90%;
height: auto;
padding: 8px;
margin-left: 5%;
font-size: 1.1rem;
margin-top: 0.5rem;
}
.container .section .box ol{
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
/* list-style: none; */
list-style: lower-alpha;
margin-top: 5px;
margin-left: 7%;
font-size: 1rem;
}
.container .section.ans-section .box ol {
list-style: none;
margin-left: 0%;
}
.container .section .copyright{
display: inline-block;
position: relative;
left: 0;
bottom: -15px;
font-size: 10px;
color: #333;
margin-top: 2rem;
}
.container .section .copyright a{
color: rgba(0,0,0,0.4);
text-decoration: none;
font-size: 12px;
}
.container .section .copyright:not(a) {
color: rgba(0,0,0,0.4);
}
.container .ans-section {
display: none;
}
@media(max-width: 820px){
.container .section{
margin: 5px;
}
}
@media(max-width: 460px){
.container .section h1 {
font-size: 1.6rem;
}
.container .section h2 {
font-size: 1.1rem;
}
.container .section .box {
font-size: 1rem;
}
.container .section .box ol {
font-size: 0.9rem;
}
.container .section .box ol li{
margin: 0 0 0 10px;
}
}
const container = document.querySelector(".container");
const btn = document.querySelector(".btn");
const papers = document.querySelectorAll("#date");
let i;
btn.addEventListener("click", () => {
if (container.classList.contains("active")) {
container.classList.remove("active");
} else {
container.classList.add("active");
}
});
var date = new Date();
for (i = 0; i < papers.length; i++) {
papers[i].innerHTML =
"Date: " +
date.getDate() +
"/" +
(date.getMonth() + 1) +
"/" +
date.getFullYear();
}
Conclusion
This Question Paper UI project showcases how a feasible and aesthetic assessment tool can be developed with only HTML and CSS. Since it focuses on the aspects of simplicity and accessibility, the design can be a perfect starting point for anyone developing their question paper UI. The professional touch given by the addition of the custom watermark makes this use ideal for educational applications.
Call to Action
If you are interested in web development or you have questions relating to this project please do not hesitate to get in touch. Have fun with the code, and customize it to suit your needs and convenience. Happy coding!
Please do not enter any spam link in the comment box.