Resource's
<html>
<head>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
<body>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</head>
</html>
background-image: url('hhhhhhh');
height: 100vh;
background-position: center;
background-size: cover;
background-image: linear-gradient(to right, red , yellow);
}
Bg color name:#f8e1f2
<button id="correct">k kelappan</button>
var button = document.getElementById("correct");
button.onclick = function(){
alert("correct")
}
Who is the father of HTML?
a) Rasmus Lerdorf
b) Tim Berners-Lee 💯
c) Brendan Eicd
d)Sergey Brin
. HTML stands for __________
a) HyperText Markup Language💯
b) HyperText Machine Language
c) HyperText Marking Language
d) HighText Marking Language
Which of the following is used to read an HTML page and render it?
a) Web server
b) Web network
c) Web browser💯
d) Web matrix
Which of the following tag is used for inserting the largest heading in HTML?
a) head
b) <h1>💯
c) <h6>
d) heading
Which element is used to get highlighted text in HTML5?
a) <u>
b) <mark>
c) <highlight>
d) <b>
---------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Quiz</title>
<style>
</style>
</head>
<body>
<div class="quiz-container" id="quiz">
<div class="quiz-header">
<h2 id="question">Question Text</h2>
<ul>
<li>
<input type="radio" name="answer" id="a" class="answer">
<label for="a" id="a_text">Answer</label>
</li>
<li>
<input type="radio" name="answer" id="b" class="answer">
<label for="b" id="b_text">Answer</label>
</li>
<li>
<input type="radio" name="answer" id="c" class="answer">
<label for="c" id="c_text">Answer</label>
</li>
<li>
<input type="radio" name="answer" id="d" class="answer">
<label for="d" id="d_text">Answer</label>
</li>
</ul>
</div>
<button id="submit">Submit</button>
</div>
<script>
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 answerEls = document.querySelectorAll('.answer')
const questionEl = 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 submitBtn = document.getElementById('submit')
let currentQuiz = 0
let score = 0
loadQuiz()
function loadQuiz() {
deselectAnswers()
const currentQuizData = quizData[currentQuiz]
questionEl.innerText = currentQuizData.question
a_text.innerText = currentQuizData.a
b_text.innerText = currentQuizData.b
c_text.innerText = currentQuizData.c
d_text.innerText = currentQuizData.d
}
function deselectAnswers() {
answerEls.forEach(answerEl => answerEl.checked = false)
}
function getSelected() {
let answer
answerEls.forEach(answerEl => {
if(answerEl.checked) {
answer = answerEl.id
}
})
return answer
}
submitBtn.addEventListener('click', () => {
const answer = getSelected()
if(answer) {
if(answer === quizData[currentQuiz].correct) {
score++
}
currentQuiz++
if(currentQuiz < quizData.length) {
loadQuiz()
} else {
quiz.innerHTML = `
<h2>You answered ${score}/${quizData.length} questions correctly</h2>
<button onclick="location.reload()">Reload</button>
`
}
}
})
</script>
</body>
</html>
Comments
Post a Comment