<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CorelDraw Quiz - KBC Style</title>
<style>
body {
font-family: 'Arial', sans-serif;
background: #0a1128;
color: #fff;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.quiz-container {
background: #14213D;
padding: 25px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
width: 600px;
text-align: center;
border: 3px solid #fca311;
box-sizing: border-box;
}
h1 {
font-size: 30px;
color: #fca311;
margin-bottom: 25px;
}
.question {
margin-bottom: 20px;
text-align: left;
}
.question-text {
font-size: 22px;
font-weight: bold;
color: #fca311;
margin-bottom: 15px;
}
.options {
margin: 20px 0;
padding: 0;
list-style: none;
text-align: left;
}
.options li {
margin: 12px 0;
font-size: 18px;
}
.options input[type="radio"] {
margin-right: 15px;
cursor: pointer;
}
button {
background-color: #fca311;
color: #fff;
border: none;
padding: 12px 20px;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #ff7518;
}
#result {
margin-top: 30px;
font-size: 24px;
font-weight: bold;
color: #fff;
}
.correct {
color: #28a745;
}
.incorrect {
color: #dc3545;
}
.answer-feedback {
margin-top: 10px;
font-size: 18px;
}
.score {
margin-top: 20px;
font-size: 26px;
font-weight: bold;
color: #fca311;
}
.navigation-buttons {
margin-top: 30px;
display: flex;
justify-content: space-between;
}
.navigation-buttons button {
width: 48%;
}
.selected {
background-color: #d4edda;
}
.wrong {
background-color: #f8d7da;
}
.correct-option {
background-color: #c3e6cb;
}
.answer-option {
margin: 12px;
padding: 12px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.answer-option:hover {
background-color: #ffd699;
}
</style>
</head>
<body>
<div class="quiz-container">
<h1>CorelDraw Quiz - KBC Style</h1>
<div id="quiz"></div>
<div class="navigation-buttons">
<button id="prev-btn" onclick="previousQuestion()" style="display: none;">Previous</button>
<button id="next-btn" onclick="nextQuestion()">Next</button>
</div>
<button id="submit-btn" onclick="submitQuiz()" style="display: none;">Submit Quiz</button>
<div id="result"></div>
</div>
<script>
const questions = [
{
question: "CorelDraw is a ____________ based drawing Application Package.",
options: ["Photo paint", "Bitmap", "Vector", "Scalar"],
answer: "Vector"
},
{
question: "Bitmap images are made up of ____________",
options: ["Pixels", "Vectors", "Particles", "Lines"],
answer: "Pixels"
},
{
question: "___________ tool is used for cropping.",
options: ["Pick tool", "Crop tool", "Zoom tool", "Knife tool"],
answer: "Crop tool"
},
{
question: "We have ____________ paper Orientation in CorelDraw.",
options: ["1", "2", "3", "4"],
answer: "2"
},
{
question: "______________ is used for selecting and deselecting objects.",
options: ["Bezier tool", "Freehand tool", "Shape tool", "Pick Tool"],
answer: "Pick Tool"
},
{
question: "What is the default paper type/size when you open CorelDraw windows?",
options: ["A4", "B2", "Postcard", "Letter"],
answer: "A4"
},
{
question: "The zoom tool is used for ___________ objects",
options: ["Magnifying", "Cropping", "Marquee selecting", "Embedding"],
answer: "Magnifying"
},
{
question: "Simple Wareframe option is under _________ Menu in CorelDRAW.",
options: ["Window", "Effect", "View", "Tool"],
answer: "View"
},
{
question: "In Corel Draw the keyboard shortcut to save your drawing is:",
options: ["Ctrl +s", "Ctrl +c", "Ctrl +z", "Ctrl +a"],
answer: "Ctrl +s"
},
{
question: "JPEG stands for ___________________.",
options: ["Joint Photo Experts Gross", "Joint Photographic Experts Gross", "Joint Photographic Experts Group", "Joint Photographic Expression Group"],
answer: "Joint Photographic Experts Group"
},
{
question: "_____ contains controls that change according to the active tools.",
options: ["Menu Bar", "Tool Bar", "Property Bar", "Title Bar"],
answer: "Property Bar"
},
{
question: "_______ objects means preventing them from accidently moving, sizing and modifying.",
options: ["Grouping", "Duplicating", "Locking", "Export"],
answer: "Locking"
},
{
question: "Which submenu convert the .cdr file in .jpeg format?",
options: ["Import", "Filter", "Export", "Text"],
answer: "Export"
},
{
question: "Portrait and Landscape are__________",
options: ["Page Size", "Page Orientation", "Alignment", "Style"],
answer: "Page Orientation"
},
{
question: "The tool in Coreldraw that helps to insert characters is ----------------",
options: ["Shape Tool", "Pick Tool", "Text Tool", "Ellipse Tool"],
answer: "Text Tool"
},
{
question: "Ellipse Tool is used to draw a..............",
options: ["Rectangular", "Line", "Circle", "Polygon"],
answer: "Circle"
},
{
question: "RGB model are used for",
options: ["Computer display", "Printing", "Painting", "None of these"],
answer: "Computer display"
},
{
question: "CMYK model are used for",
options: ["Computer display", "Printing", "Painting", "None of these"],
answer: "Printing"
},
{
question: "CMYK is the color combination of these color.......",
options: ["Cyan, Magenta, Yellow, Black", "Cyan, Maroon, Yellow, Blue", "Chestnut, Magenta, Yale Blue", "Cyan, Magenta, Yellow, Gray"],
answer: "Cyan, Magenta, Yellow, Black"
},
{
question: "To open the toolbox from ........... Menu",
options: ["View", "Layout", "Window", "Tools"],
answer: "Window"
},
{
question: "Shortcut key to Import",
options: ["Ctrl+J", "Ctrl+W", "Ctrl+I", "Ctrl+Q"],
answer: "Ctrl+I"
},
{
question: "There are ........... Types of Ruler in Corel Draw",
options: ["1", "2", "3", "4"],
answer: "2"
},
{
question: "Which tool is used to draw circle",
options: ["Rectangular Tool", "Shape Tool", "Line Tool", "Ellipse Tool"],
answer: "Ellipse Tool"
},
];
let currentQuestionIndex = 0;
let score = 0;
// Load the question and options
function loadQuestion() {
const question = questions[currentQuestionIndex];
const quizContainer = document.getElementById('quiz');
quizContainer.innerHTML = `
<div class="question">
<div class="question-text">${currentQuestionIndex + 1}. ${question.question}</div>
<ul class="options">
${question.options.map(option => `
<li class="answer-option">
<label>
<input type="radio" name="q${currentQuestionIndex}" value="${option}" onclick="checkAnswer()">
${option}
</label>
</li>
`).join('')}
</ul>
<div class="answer-feedback" id="feedback"></div>
</div>
`;
}
// Check the selected answer
function checkAnswer() {
const selectedOption = document.querySelector(`input[name="q${currentQuestionIndex}"]:checked`);
const feedbackElement = document.getElementById('feedback');
if (selectedOption) {
const correctAnswer = questions[currentQuestionIndex].answer;
if (selectedOption.value === correctAnswer) {
score++;
feedbackElement.innerHTML = `<span class="correct">Correct! The answer is: ${correctAnswer}</span>`;
} else {
feedbackElement.innerHTML = `<span class="incorrect">Wrong! The correct answer is: ${correctAnswer}</span>`;
}
}
}
// Navigate to next question
function nextQuestion() {
const selectedOption = document.querySelector(`input[name="q${currentQuestionIndex}"]:checked`);
if (selectedOption) {
checkAnswer();
}
if (currentQuestionIndex < questions.length - 1) {
currentQuestionIndex++;
loadQuestion();
updateNavigationButtons();
}
}
// Navigate to previous question
function previousQuestion() {
if (currentQuestionIndex > 0) {
currentQuestionIndex--;
loadQuestion();
updateNavigationButtons();
}
}
// Update navigation buttons visibility
function updateNavigationButtons() {
document.getElementById('prev-btn').style.display = currentQuestionIndex === 0 ? 'none' : 'inline-block';
document.getElementById('next-btn').style.display = currentQuestionIndex === questions.length - 1 ? 'none' : 'inline-block';
document.getElementById('submit-btn').style.display = currentQuestionIndex === questions.length - 1 ? 'inline-block' : 'none';
}
// Submit the quiz and show the results
function submitQuiz() {
const resultElement = document.getElementById('result');
resultElement.innerHTML = `
<div class="score">Your Score: <span>${score}</span> out of ${questions.length}</div>
`;
document.getElementById('next-btn').style.display = 'none';
document.getElementById('prev-btn').style.display = 'none';
document.getElementById('submit-btn').style.display = 'none';
}
// Initialize quiz
loadQuestion();
updateNavigationButtons();
</script>
</body>
</html>
Posted inBlog
QuizCorelDraw
