Menu
Community /Pin to ProfileBookmark
Hindi font not display properly while rendering Javascript
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]<!DOCTYPE html>
<html >
<head>
<meta charset=”UTF-8″>
<title>Page title</title>
<link rel=”stylesheet” type=”text/css” href=”quiz.css”>
<link href=”https://fonts.googleapis.com/css?family=Bree+Serif|Concert+One|Nunito” rel=”stylesheet”>
</head>
<body>
<div class=”container”>
<h1>Financial Quiz</h1>
<p class=’description’>Test your knowledge on the Finance</p>
<div class=”start-quiz”>
<button class=’start-button dot’>START</button>
</div>
<!– */******************QUESTIONS********/* –>
<div class=’questions’>
<p class=”score”> Score: </p>
<h2 class=’question’></h2>
<ul class=”list”> </ul>
<div class=’submit’>
<button class=”submit-button”>Check Answer</button>
</div>
<div class=’next’>
<button class=”next-button”>Next</button>
</div>
<p class=’question-number’></p>
</div>
<!– */********************COMPLETED PAGE************ –>
<div class=’end-quiz’>
<p class=’end-score’></p>
<p class=’comment’></p>
<button class=”retake-button”>RETAKE QUIZ</button>
</div>
</div>
<script src=”https://code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”quiz.js”></script>
</body>
</html>
**Javascript
[code]const myQuestions = [{
‘question’: “हिंदी भाषा के कितने मुख्य अंग है?”,
‘answers’: [“एक”, “दो”, “तीन”],
‘correct’: 1
}, {
‘question’: “हिंदी भाषा में वाक्य के कितने मुख्य अंग है?”,
‘answers’: [“एक”, “दो”, “तीन”],
‘correct’: 2
}
];
var score = 0;
var current = 0;
$(document).ready(function() {
$(“.start-button”).click(function() {
$(‘.start-quiz’).hide();
$(‘.next’).hide();
$(‘.questions’).show();
displayQuestion();
$(‘.score’).text(‘Current Score: ‘ + score);
});
$(“.next-button”).click(function(event) {
displayQuestion();
$(‘.next’).hide();
$(‘.submit’).show();
});
$(“.submit-button”).click(function(event) {
if ($(‘li.selected’).length) {
var answer = $(‘li.selected’).attr(‘id’);
checkAnswer(answer);
$(‘.next’).show();
$(‘.submit’).hide();
} else {
alert(‘Please select an answer’);
}
});
$(“.retake-button”).click(function() {
location.reload();
console.log(“Retake button clicked”);
});
$(‘ul.list’).on(‘click’, ‘li’, function(event) {
$(‘.selected’).removeClass();
$(this).addClass(‘selected’);
});
});
function displayQuestion() {
$(‘.question-number’).text(‘Question Number: ‘ + (current + 1) + “/10″);
if (current < myQuestions.length) {
var listQuestion = myQuestions[current];
$(‘h2’).text(listQuestion.question);
$(‘ul.list’).html(”);
for (var i = 0; i < listQuestion.answers.length; i++) {
$(‘ul.list’).append(‘<li id = “‘ + i + ‘”>’ + listQuestion.answers[i] + ‘</li>’);
}
} else {
// show summary that says how many you got correct
displayScore();
}
}
function checkAnswer(answer) {
var listQuestion = myQuestions[current];
if (listQuestion.correct == answer) {
score++;
$(‘li.selected’).addClass(‘correct’);
} else {
$(‘li.selected’).addClass(‘incorrect’);
$(‘li’).eq(listQuestion.correct).addClass(‘correct’);
}
$(‘.score’).text(‘Current Score: ‘ + score);
current++;
}
function displayScore() {
$(‘.questions’).hide();
$(‘.end-quiz’).show();
$(‘.end-score’).text(“Your score is: ” + score + ‘/10’);
if (score >= 8) {
$(‘.comment’).text(‘GREAT JOB!’);
} else {
$(‘.comment’).text(‘You need to work hard’);
}
}
Sign in
to post a comment