CODEWITHSUNDEEP
htmlcss
Aquaholic
Aquaholic

Reputation: 931

HTML CSS Blur Text with no visibility in source code

HTML CSS combo can be used to "blur" the text or image, when displayed in Browsers.

.blur {
  filter: blur(3px);
}
<div class="blur">Hello How are You?</div>

However, the text is still visible and accessible clearly when someone goes to view-source or inspect-element in the browsers.

Is there any additional way in which the text becomes completely invisible/inaccessible even in view-source or inspect-element ?

This is for an online quiz for 20 questions, where few sample questions (say 4) are clearly visible (both q&a), but rest 16 q&a are blurred or inaccessible. Now, my aim is to have all the 20 questions accessible to Search engines like Google and paid subscribers, but only 4 to free site visitors. Hence, the q.

Upvotes: 0

Views: 7009

Answers (2)

levent001
levent001

Reputation: 202

Do note - in the context of the question, "blur" tag may not be fully useful. Because it simply blurs the text. If someone copies that blurred text and paste it in Notepad, it will be visible clearly.

In the given situation, one of the solution is to use a combo of (1) keep dummy questions for those you want to hide, and (2) also blur them as above.

As most of the quiz takers may not be aware of blur shortfalls (& may not take the efforts to copy-paste blurred text to Notepad), blur alone will work. For those who do copy-paste, the dummy questions will make it useless. However, you will need to put in efforts to draft the dummy questions to match the topic for search engines to make it contextual.

Another option is to use AJAX. It allows for pulling selective content from the server based on condition (like button click, or check for logged in users). Lots of examples available on w3schools for selective rendering.

Upvotes: 2

bjelli
bjelli

Reputation: 10090

if you are building a quiz of some sort, and don't want people be able to cheat by looking at the solution in the source code you could try tow followin two ideas:

Upvotes: 1

Related Questions