Menu
I want to make a quiz on blogger with the help of java script, but Hindi font is not showing correctly, although the options are showing correctly but the question is not. I have also adding utf-8 Meta code and also used google font mukta but still Hindi font is not showing properly. After adding the utf 8 code, the Hindi font is showing correctly when the html file is opened directly in the browser, but after adding it in the blogger, the Hindi font of the question is not showing correctly.
**[You can better understand via this image
**### HTML
[code]
<div class=”quiz-container” id=”quiz”>
<div class=”quiz-header”>
<h2 id=”question” style=”font-family: mukta sans-serif;”>Question is loading…</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>
[code]
.quiz-container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
width: 100%;
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;
}
[/code] [code]
const quizData = [
{
question: “हिंदी भाषा के कितने मुख्य अंग है?”,
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 = ‘<h2>You answered ${score}/${quizData.length} questions correctly</h2>’
‘<button onclick=”history.go(0)”>Play Again</button>’
location.reload();
}
}
});
[/code]