Scribd
Upload
2 views

computer multimedia and animation lab list (2)

Bca 4th sem manglore university

Uploaded by

akashkkotari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

computer multimedia and animation lab list (2)

Bca 4th sem manglore university

Uploaded by

akashkkotari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Computer Multimedia & Animation – Practical List

Part A

1. Create a home page for a college website congaing all latest HTML5 tags like <article>,
<aside>, <nav>, <header>, <footer>, <section>, <figure>. And in <nav> it must have
hyper links for courses, facilities and contact details. While clicking on each of these
hyper links it should take us to corresponding page where in course page courses must be
displayed in an ordered list, and in facilities page it should be displayed in an unordered
list, contact details page must give phone number, email and address in separate columns
with respective headings.

2. Design a HTML5 web page containing form with text, password, number, range, email,
url, file, submit and reset elements which must be styled using CSS3 according to
following screen shot.

Important points to be followed:


 Styling must be exactly same as shown in the above screen shot (with border
radius, box shadow and colours).
 Submit and Reset buttons must change their colour on mouse hovering.
 Name and passwords should not be empty. If they are must provide error message
when clicked submit.
 When clicked on submit button email, Profile URLs must be validated for proper
input.
 Contact number must contain only 10 digits not lesser and not more.
 Clicking on Reset button must clear all fields’ entry.
3. Create an HTML5 web page which shows a smiling face initially and a button on
clicking the button it should toggle between smiling face and sad face. Use only one
button. And faces should be drawn using canvas element. Faces must be exactly like the
following screen shots.

4. Design a mock login page and style it using CSS3. Initially login page should look like the
following screen shot

And while mouse is hovered on SUBMIT button it should look like


5. Create a web page to model solar system using canvas element animation, where it
contains sun, earth and moon (all must be created using canvas shapes not images). Earth
should revolve around sun and moon should revolve around earth simultaneously.
Sample screen shot below:

6. Create the following drawing in html page using only SVG.


7. Create the following drawing using SVG

8. Create a web page using HTML and CSS to create a timetable as follows:

Part B

1. Create an web page using HTML5 canvas element to show a clock which changes time
for every second minute and hours (as that of a anolog clock). Clock should have second,
minute and hour needles and minute marking must be there (as shown in screen shot).

2. Create a web page containing simple calculator which should basic arithmetic (+,-,*,/)
operation on two floating point numbers and show result.
Validations to be followed:
 . (Decimal point) should be taken only once for an operand.
 Operand can be negative.
 Division by zero must be shown proper error message in result.
Sample screen shot:

3. Create a HTML page make a quiz game where user should answer one question at a time,
answers must be shown in radio buttons. Without submitting the answer quiz should not
move to next question (Minimum five questions must be there). When user wishes to get
score (using score button) score should be displayed in alert message. All the question
must be loaded in same page (no page navigation is allowed) Sample screen shot:

4. Create a web page using HTML/CSS which contains cards (shown as a stack of cards)
with image of a tourist place and below that is a thumbnail (shown in circle with image),
when mouse hovers over thumbnail corresponding card comes in front and also small
description about the tourist place will be displayed. All these must happen using css
animation and transition.
Initial interface:

Interface should look like below screenshot when mouse hovered on thumbnail:

(Java script should not be used to animate.)


5. Create a web page using HTML5/CSS3 to animate a truck movement. While truck moves
trees should move in the back ground. Output screen shot:
For tree, truck and wheels download the images from the following URLs.
https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/tree.svg
https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/truck.svg
https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/wheels.svg
Animation must be pure CSS and Java script should not be used.
6. Create a simple paint app which draws lines based on the selected colour (chosen using
color input) with selected thickness (chosen using number input) and there must be clear
button clear the canvas. Sample screen shot:

7. Create web page using HTML5 canvas element to illustrate all canvas composition.
Output must exactly look like the following screenshot:
8. Create a web page which must be as shown in below image using HTML5, SVG and
CSS3. Here Mountain must be drawn using SVG, Stars in sky changes their position
randomly for every time page is loaded (java script can be used). Sky and stars must be
created using <canvas> element.

Note: No Online (live access) CSS files must be used.

You might also like