Responsive Quiz maker for Mobile Phones / Tablets
Wed 6th Aug 2014< Back to Blogs and Tutorials
Sometimes it's more convenient for users to take their online quizzes on their mobile phone or tablet. ClassMarker's quiz interface is built to work on all devices from PCs to mobile phones and tablets (including iOS, iPhone, iPads, Android devices - the list goes on).Users can easily read and answer questions just as easily and quickly as if they are taking their online test on their computer.
We have made our Quiz interface in such a way that when users take their Linked Tests on a mobile phone, they do not need to stretch and pinch during the test to read the text, this is called responsive design.
There is nothing you need to do, just provide users with the Direct Link to your test from your blog or email and they can click the link and get started right away - no need to install any apps.
Embedded quizzes guidelines for small screens
This guideline is to help web developers and site owners should they be having issues with their Embedded ClassMarker exams.
If you are embedding quizzes in your website, and your website is responsive, here are some tips to ensure your user's experience taking their online test on mobile devices is the best it can be.
Our guidelines for best user experience are:
iFrame code
We recommend you use a width: 100% with a max-width: 700px. This allows the quiz to display better on a small screen without the need for a user to pinch or scroll right and left to see the whole question.
Responsive HTML tags in your website
A common HTML tag websites use to make small screens (iPhones etc) display web pages more readable is the Viewport HTML tag:
Standard Viewport tag: (allows pinching and zooming)
However, problems can occur if your Viewport HTML tag on your website has a couple of extra parameters in it such as, minimum-scale=1.0, maximum-scale=1.0 (see below) which limits the user's ability to pinch and zoom in on content should they need to. So if you have an iFrame in your website and your website limits the user from pinching and zooming, this can cause issues for them.
Restricted Viewport tag: (disallows pinching and zooming)
Note: Your embedded quizzes will still work just fine without the Viewport HTML tag on your website. This is just a guide for best practices if you are using the Viewport HTML tag when embedding online quizzes in your website for mobile devices and tables.
If you have any questions, feel free to contact our customer support team, available 7 days a week.
Happy Testing!
Register here and start giving online exams today.
Review Related Online Testing Blogs and Tutorials
How can I integrate online tests on my website?
How to create custom certificates?
How to give exams in multiple languages?
Give practice test online