Moksha - Test 3 - HTML

 



HTML5 Coding Test Paper

Instructions:

  • This coding test consists of 10 HTML5 coding questions.
  • You have 120 minutes to complete the test.
  • Write HTML5 code for each question.
  • Ensure your code follows HTML5 standards and best practices.
  • Please write the code in the space provided.

Question 1: HTML Structure (10 points) Create a basic HTML5 structure for a webpage with the following elements:

  • <html>
  • <head> with a title "My Webpage"
  • <body> with a heading "Welcome to My Webpage" (use an appropriate heading element) and a paragraph of lorem ipsum text.

Question 2: Semantic Elements (15 points) Enhance the HTML structure created in Question 1 by using semantic elements. Replace generic elements with semantic elements wherever appropriate. Ensure the proper use of <header>, <nav>, <main>, <article>, and <footer>.

Question 3: Form (20 points) Create an HTML form that collects user information, including:

  • Name (text input)
  • Email (email input)
  • Age (number input)
  • Gender (radio buttons)
  • Interests (checkboxes, at least three options)
  • Submit button.de for Question 3 here: -->

Question 4: Video Embed (20 points) Embed a video into the webpage using the <video> element. Use a video of your choice (e.g., from YouTube) and include controls for play, pause, and volume. Provide a poster image for the video.>

Question 5: Local Storage (15 points) Write JavaScript code to implement a simple to-do list using HTML5 Local Storage. The webpage should have an input field for adding tasks, a button to add a task, and a list to display tasks. When a task is added, it should be stored in Local Storage, and when the page is refreshed, the tasks should still be displayed.

Question 6: Audio Embed (15 points) Embed an audio file into the webpage using the <audio> element. Use an audio file of your choice and include controls for play, pause, and volume.

Question 7: Geolocation API (10 points) Write JavaScript code to access and display the user's current location using the Geolocation API. Display the latitude and longitude on the webpage.

Question 8: Canvas Drawing (20 points) Create an HTML5 canvas element and use JavaScript to draw a simple shape (e.g., a rectangle, circle, or line) on the canvas. Add interactivity to the shape, such as moving it when the user clicks on it.

Question 9: Web Storage (15 points) Implement a simple user authentication system using HTML5 Web Storage (localStorage). Create a login form with username and password fields. When a user successfully logs in, store their authentication status in Web Storage.->

Question 10: Drag and Drop (20 points) Create a webpage with two elements that can be dragged and dropped. Implement JavaScript code to enable drag-and-drop functionality between these elements.

Note: Make sure to include the necessary HTML5 elements, attributes, and provide appropriate comments for each code segment. Good luck with the test!

Comments

Post a Comment

Popular posts from this blog

FrontEnd - FAQs - Part 1

  Front End FAQS – Part 1                                                                                                          HTML 1.         What is HTML? Answer : HTML (Hypertext Markup Language) is a markup language used to create and structure content for the web. HTML code consists of a series of tags that define different elements, such as headings, paragraphs, images, links, and more. HTML is the backbone of the web and is used...
Read more

Java Script - FAQs

Java Script FAQs   1.        What is JavaScript, and what are its features? Answer : JavaScript is a high-level, dynamic programming language that is primarily used for creating interactive web applications. It was first created in 1995 by Brendan Eich and has since become one of the most widely used programming languages in the world. Some of the features of JavaScript include: ·          Object-oriented programming: JavaScript is a highly object-oriented language and supports many of the features that are found in other object-oriented languages like Java and C++. This allows developers to create complex applications with a high degree of abstraction and modularity. ·          Dynamic typing: JavaScript is a dynamically typed language, which means that variables do not need to be declared with a specific data type before they are used. This makes it much easier for develo...
Read more

CoreJava - ClassesObjectsMethods - Assignment

Image
  CoreJava - ClassesObjectsMethods - Assignment Classes, Objects, Methods: 1.        Create a class called "Person" with instance variables for name, age, and gender. 2.        Create an object of the "Person" class and set its instance variables. 3.        Write a method in the "Person" class that prints out the person's name, age, and gender. 4.        Write a method that calculates the age of a person based on their birth year. 5.        Write a method that checks if a person is an adult (over 18 years old). 6.        Create a class called "Rectangle" with instance variables for length and width. 7.        Write a method in the "Rectangle" class that calculates the area of the rectangle. 8.        Write a method that calculates the perimet...
Read more