LAKSHMIPAT SINGHANIA ACADEMY

RAUNAK NATH
PRACTICAL FILE
CLASS 12 A
WEB APPLICATION(803)

BOARD ROLL NO.

______________
 1

Index
SL PG
Topic
No. No.
Section-A- Employability Skills
1 Self-Management Skills 4

2 Communication skills MCQ 9

3 ICT Skill 11

4 Entrepreneurship Skill 14

5 Green Skills 19

Section-B- Subject-specific skills

Movie Editing Tools

6 E-Raksha 22

7 Tribal Community 25
8 Digital Financial Security 34
Customizing and Embedding Multimedia
Components in Web Pages
9 Rabindranath Tagore (Audio) 30

10 Digital Financial security (video) 34

Web Scripting - Java Script
11 JS-String Object 37
12 Switch Case 41

13 Nested If 44

14 House Image 52
 2

15 Smart Package Fees 55

16 Playing With Datatypes 57
17 Radio Checked 57
18 Book Read (JS Events) 58
19 JS MCQs 64
20 Array Object 67
21 Math’s Object 77
22 Loops 78

Advanced Features of Web design

23 Add Ins 82
24 CSS 84
25 DWT 83
26 Snippets 84
27 Examining Structure of a Website 85
28 Examining Size of a Website 85
Sec-C-Project/expeditionary learning
29 Stay Safe Online 87
30 Veer Gatha 89
31 ICC Cricket World Cup 90
32 International CyberFair 96
The End
 3

Section A
Employability Skills
 4

Class: XII

Subject: Web Application

Week#3
Employability Skill - Self-Management Skills
General Instructions:-
● Refer to the eBook
● Type your answers in this document
● Save your document as Name_SelfMng
● Upload in Teams-Assignment

Q1) State the components of Self-management skill.

Q2) Mentions the steps we need to take to achieve our result.
Q3) Expand the acronyms:
a) SMART –
b) GLAD -
Q4) Write the parameters of FFM and explain briefly.
Q5) Attempt the quiz given below. Type the correct answers below each
picture:

a)
 5

ANS- I must wash the plates and glasses and dry them with a towel.
Then, I must arrange them in the cupboard.
That doesn't sound too bad! I must get started!
b)

ANS-
Muhammed should go to the nearest store without wasting time and get
the missing ingredient. He can then begin baking.
 6

ANSWERS
Q1) Components of self-management skills are-
ANS) Positive thinking- to think that one can get things
done and be happy.
Result in orientation: -to dream big and achieve the
desired or set results.
Self-awareness- to be aware of one’s personality
traits and make the best out of one’s strengths.
Q2) Steps to achieve our results-
ANS)
(i) Set clear goals: Setting clear and accurate goals is
the first step one needs to take to meet the targets.
(ii) Prepare an action plan: An action plan describes
the way a person or an organization will meet the set
objectives. It gives a detail of the steps to be taken
to achieve the target. Therefore, it consists of several
actions or steps that need to be taken and changes
that need to be made. Each action, step, or change
should include the following information.
• What changes will occur after the actions?
• Who will carry out the changes?
• When will the changes take place?
• How long will the changes stay?
• What resources are needed to carry out
the changes?
• Who should know and what should be
communicated?
(iii) Use the right resources and tools: One must
evaluate the resources and tools needed to
achieve those results and whether they are
available. For example, you may want to clear the
college entrance exam with 70 percent marks.
Do you have the books to study for the exam?
If not, from where and how can you get them?
(iv) Communicate with mentors and peers: One
must talk to teachers, seniors, and mentors for
help in setting realistic goals.
(v) Make a calendar: One must make a calendar to
monitor the progress at regular intervals.
(vi) Work hard: One must work hard and believe in
one’s dreams.
 7

Q3) SMART- Specific, Measurable, Action-Oriented, Realistic, Timely

GLAD- Grateful, learn, Achievement, Delight
Q4) Parameters of FFM-
Openness-Individuals with openness to experience are, generally, creative,
curious, active, flexible, and adventurous. If a person is interested in
learning new things, meeting new people and making friends, and likes
visiting new places, the person can be called open-minded.
Consciousness:
Consciousness-Individuals, who listen to their conscience, are
self-disciplined, do their work on time, take care of others before
themselves, and care about others' feelings.
Extraversion-Extroverts are individuals, who love interacting with people
around and are, generally, talkative. A person, who can easily make friends
and make any gathering lively, is confident and an extrovert.
Agreeableness:-Individuals having such a trait are, generally, kind,
sympathetic, cooperative, warm, and considerate. They accommodate
themselves in any situation. For example, people who help and take care of
others are, generally, agreeable.
Neuroticism:- Neuroticism is a trait, wherein, individuals show a tendency
towards anxiety, self-doubt, depression, shyness, and other similar negative
feelings. People, who have difficulty meeting others and worry too much
about things, show signs of neuroticism.

Communication skills MCQ

Session1-Active Listening

ANS D) All of the above

 8

ANS B) Effective communication

ANS B) Keep the work aside and help the customer

ANS B) Clear

ANS B) Communication
Session2- Parts of Speech
 9

ANS D) Interjections

ANS B) A group of words that communicates a complete thought

ANS C) 8

ANS C) Adverb
 10

ANS C) Prepositions

Session3- Writing Sentences

ANS A) Direct or Indirect

ANS B) Complex Sentences

ANS C) Exclamatory
 11

ANS D) He wrote a letter to his sister.

ANS B) The clock was repaired by Raju

Employability Skill – ICT Skill

Sl. No Item Name Qty Price Amount

Create a similar spreadsheet using Open Office Calc.

Fill up details for 6 items
Write the following questions and their answers at the bottom of your data,
in the same worksheet
Which feature have you used to fill up the Sl.No.
With reference to cell address, write the formula/ function used to calculate
Amount of 2nd item
Rearrange entire data based on alphabetical arrangement of Item Name.
Name the feature used.
 12

Display maximum quantity value in the spreadsheet. Name the function.

Display minimum price value. Name the function.
Which function will allow you to display number of items? With reference to
cell address, write the formula/ function.
ANSWERS-

1. Which feature have you used to fill up the Sl.No.?

- To fill up the Sl. No., you can simply enter the numbers manually in the
respective cells.

2. With reference to cell address, write the formula/function used to

calculate the Amount of the 2nd item.
- Let's assume the Qty and Price values for the 2nd item are in cells C3
and D3 respectively. To calculate the Amount, you can use the formula
`=C3*D3` in cell E3.

3. Rearrange the entire data based on alphabetical arrangement of Item

Name. Name the feature used.
- To rearrange the data based on the alphabetical order of the Item Name,
you can use the "Sort" feature in Excel. Select the entire data range
including headers, go to the "Data" tab, and click on the "Sort A to Z" or
"Sort Smallest to Largest" button. This will sort the data based on the Item
Name in ascending order.
 13

4. Display the maximum quantity value in the spreadsheet. Name the

function.
- To display the maximum quantity value, you can use the MAX function.
Assuming the Qty values are in the range C2:C7, you can enter the formula
`=MAX(C2:C7)` in any desired cell to get the maximum quantity value.

5. Display the minimum price value. Name the function.

- To display the minimum price value, you can use the MIN function.
Assuming the Price values are in the range D2:D7, you can enter the
formula `=MIN(D2:D7)` in any desired cell to get the minimum price value.

6. Which function will allow you to display the number of items? With
reference to cell address, write the formula/function.
- To display the number of items, you can use the COUNTA function.
Assuming the Item Name column starts from cell B2, you can enter the
formula `=COUNTA(B2:B7)` in any desired cell to get the count of items.
This function counts all non-empty cells in the given range.
14
15
16
17
18
 19

GREEN SKILLS
Earth Day Video
Video link- https://youtu.be/xJaHWqRg9RE
20
 21

Section-B
Subject-specific
skills
 22

E-Raksha

The goal of eRaksha competition is to enable young people across age

groups to become responsible digital citizens, following the required safety
norms and procedures.

The Competition provides an opportunity to share the immersive experience

and ideas of youth in cyber security with the nation to understand and
imbibe cyber security, threats, challenges, and safeguards while designing
their original submissions.

Participants are required to create and share posters, banners, videos,

reels, shorts, essays, blogs or software applications aligned with the theme.
All entries should be original, and unique.

Important Guidelines:

▪ The competition is open for students, educators, educational

institutions and caregivers.
▪ There is no registration/participation fee.
▪ Entries will be accepted in Hindi and English only.
▪ Entries will be accepted only in Digital Format on eRaksha Website.
▪ Entries through email will not be accepted or evaluated.
▪ Each individual can submit only one entry in each category.
▪ Winners of the last 4 years cannot submit entries in the same
category they got the prize.
▪ Participants should submit their original ideas.
Copied/Plagiarised/AI-Digitally Created entries will be rejected.
▪ Credits/citations should be given wherever necessary.
▪ The entries should be submitted in the specified format and size for
each category.
▪ Duplicate entries will be rejected.
▪ Entries will be evaluated in three rounds with the Grand Jury selecting
the finalists and winners in each category. The decision of the Jury
will be final and binding. No request for re-evaluation will be
entertained.
 23

▪ The participants grant the organizers rights to upload their

submissions on eRaksha Competition website, and associated social
media platforms.
▪ Any entry which is incompatible with the guidelines will not
be considered as valid.
▪ Participation Certificates will be given for valid entries only which align
to the topic, are self created and not plagiarized/copied from other
sources or digitally created/AI generated

Topic:-

Event- Self Created Videos-

Link - https://www.eraksha.net/screen-masters/
create an original video in the form of short movies, awareness videos,
songs, podcasts, satires, parodies, reels, shorts and interviews with a
strong message aligning with the theme of the competition – “Fostering
Safe and Responsible Cyber Culture”. Participants can choose any topic
around this theme such as privacy issues, safety, trolling, security tips,
online fraud, cyberbullying, phishing, vishing, malware, etc.

Note:

▪ If you choose to write any text in the video, please make sure that it is
either in Hindi or English.
▪ Credits should be given wherever necessary.
▪ Individual can submit their self created entry.
▪ Team Entry with participation of maximum 5 individuals will also be
accepted in this category only.
▪ The entry should not feature any religious subject matter, national
flag, racial, defamatory or any specific person, group, or business
name.
▪ The reels/shorts should not be more than 30 seconds.
▪ The maximum duration of the short movies, awareness videos,
songs, podcasts, satires, parodies, and interviews should not exceed
8 minutes.
▪ The participants have to upload the entry on Youtube/ Instagram/
Twitter/ Facebook and share the link in the registration form.
▪ No documentaries will be accepted.
 24

▪ Participants should submit their original ideas.

Copied/Plagiarised/AI-generated entries will be rejected.
▪ Each individual can only upload 1 file with a maximum file size of up
to 10 MB.
▪ The films/videos should be in MPEG4 or AVI format.
▪ Duplicate entries will be rejected.

Registration:-
https://www.eraksha.net/register-now/
 25

Tribal Community
26
 27

Customizing and Embedding

Multimedia
Components in Web Pages
 28

File Extensions
29
 30

Rabindranath Tagore (Audio)

Lakshmipat Singhania Academy
Session 2023-24
Class:XII Subject: Web Application Week#5
Unit-Customizing and Embedding Multimedia Components in Web Pages
Topic:Rabindra Jayanti
Rabindranath Tagore, who composed the National Anthem of India and won
the Nobel Prize for Literature, was a multitalented personality in every
sense. He was a Bengali poet, Brahmo Samaj philosopher, visual artist,
playwright, novelist, painter and a composer.
Rabindra Jayanti is an annually celebrated cultural festival, prevalent
around the world, in the remembrance of Rabindranath Tagore's birthday
anniversary. This year the celebration is on May 09th .
Source:https://www.culturalindia.net/indian-art/painters/rabindranath-tagore.
html
To Do:-
· On the occasion of Rabindra Jayanti create one tribute webpage on
Rabindranath Tagore.
· Along with other HTML elements you must add relevant images anda
relevant audio too.
· Download the required resources to be added in the Webpage.
· Include at least one relevant image. Identify the file type.
· Include one relevant audio which will play in loop till the time the Webpage
is open. Identify the file type.
· Must display the audio controls on the Webpage.
· Acknowledge the resources used by you.
· Save it as Names_Tagore.
· Upload all required files in the given link
 31

Code:
<html>
<head><title>Rabindra Nath Tagore</title></head>
<body bgcolor='#ADD8E6'>
<center><h1 style="color:green;font-size:46px;"> Rabindranath Tagore
</h1>
<img src='portrait.jpg' alt='portrait.jpg'><br>
<audio src='rnsangeet.mp3' type='audio/mp3' controls loop
autoplay></audio>
<br>
<font size=3 face="Arial" color='grey'>
<b>Fact Sheet :<br>
Date of Birth: May 7, 1861<br>
Place of Birth: Calcutta, British India<br>
Date of Death: August 7, 1941<br>
Place of Death: Calcutta, British India<br>
Profession: Writer, song composer, playwright, essayist, painter<br>
Spouse: Mrinalini Devi<br>
Children: Renuka Tagore, Shamindranath Tagore, Meera Tagore,
Rathindranath Tagore and Madhurilata Tagore<br>
Father: Debendranath Tagore<br>
Mother: Sarada Devi<br>
Award: Nobel Prize in Literature (1913)</b>
</center>
<br><br>
</font>
<font size=5 face="Segoe UI" color='red'>
<b>Rabindranath Tagore (1861-1941)</b> was the youngest son of
Debendranath Tagore, a leader of the Brahmo Samaj, which was a new
religious sect in nineteenth-century Bengal and which attempted a revival of
the ultimate monistic basis of Hinduism as laid down in the Upanishads. He
 32

was educated at home; and although at seventeen he was sent to England

for formal schooling, he did not finish his studies there. In his mature years,
in addition to his many-sided literary activities, he managed the family
estates, a project which brought him into close touch with common
humanity and increased his interest in social reforms. He also started an
experimental school at <i>Shantiniketan</i> where he tried his Upanishadic
ideals of education. From time to time he participated in the Indian
nationalist movement, though in his own non-sentimental and visionary way;
and Gandhi, the political father of modern India, was his devoted friend.
Tagore was knighted by the ruling British Government in 1915, but within a
few years he resigned the honour as a protest against British policies in
India.
<br>
From Nobel Lectures, Literature 1901-1967, Editor Horst Frenz, Elsevier
Publishing Company, Amsterdam, 1969<br>
This autobiography/biography was written at the time of the award and first
published in the book series Les Prix Nobel. It was later edited and
republished in Nobel Lectures. To cite this document, always state the
source as shown above.
<br><br>
Source:<br>
https://as2.ftcdn.net/v2/jpg/05/02/92/33/1000_F_502923309_RLO7TpQNEl
Z9zsl6B0r2OfXFIwxN3b2S.jpg<br>
https://www.culturalindia.net/indian-art/painters/rabindranath-tagore.html
</font>
</body>
</html>
33
 34

Digital Financial Security

Code:
<html>
<head><title>Digital Financial Security</title></head>
<body bgcolor='#ADD8E6'>
<center><h1 style="color:green;font-size:46px;">Digital Financial
Security</h1>

<font size=5 face="Arial" color='grey'>

<b>Why is digital financial security important? What is it?</b>
<br><br>

Banking has migrated to digital and online platforms, like the majority of
other life admin activities. Nowadays, the majority of us access and manage
our finances via our smartphones and laptops, therefore it's critical to make
sure that our electronic data and information are secure and confidential.
Keeping such information secure is what digital financial security is all
about. This can involve safeguarding your pins and passwords as well as
defending yourself from abuse made possible by technology.
<br>
<b><u>Safety advice for online banking</b></u>
<br>
<i>Put a password on your computer, tablet, and phone.</i><br>
When not in use, password-protect your devices to prevent unauthorized
access and to safeguard yourself in case they are lost or stolen. For
instructions on how to set up password security, refer to your device's
documentation.
<br><br>

<i>Make secure, one-of-a-kind passwords, and alter them every three

months.</i><br>
 35

Passwords should be 8 characters or longer, contain a mix of upper- and

lowercase letters, digits, and symbols.
<br><br>
<i>Implement multi-factor authentication</i><br>
If the multi-factor authentication is available at your bank or credit union.
Use it. With multicolor authentication, your device only receives access after
submitting two or more pieces of information successfully.
<br><br>
<i>Don't keep your accounts logged in</i><br>
When you are done with online banking, log out.
<br><br>
<i>Avoid banking on public WIFI</i><br>
Public WIFI isn't necessarily secure. Avoid doing online banking on public
WIFI networks. Save that for a secure network at home.
<br><br>
<i>Don't access your bank account from a shared computer</i><br>
Avoid accessing your bank account from a computer that is not yours or is a
shared computer.
<br>
<br><br>
</font>
<font size=5 face="Segoe UI" color='red'>
<br><br>
<img src='/img1.JPG' alt='img1.jpg' height=300px width=500px>
<video src='Movie.mp4' type='video/mp4' height=300px width=500px
controls loop autoplay></video><br>
</i>The format of the video is .mp4</i>
<br>
</center>
Source:<br>
https://wesnet.org.au<br>
 36

https://netfinance.wbresearch.com
</font>
</body>
</html>
 37

Web Scripting - Java Script

JS-String
Q1.
<!DOCTYPE html>
<html>
<head>
<title>replit</title>
</head>
<body>
Hello world
<script>
str="HELLO WORLD";
document.write("<br>"+str.substring(0,4));
</script>
</body>
</html>

Q2.
<!DOCTYPE html>
<html>
<head>
<title>Capitalise first letter</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
hello world
<script>
str="hello world"
strupper=str.charAt(0).toUpperCase() + str.slice(1);
 38

document.write("<br>"+strupper);
</script>
</body>
</html>

Q3.
<!DOCTYPE html>
<html>
<head>
<title>String in Between</title>
</head>
<body>
Hello world
<script type="text/javascript">
let string = 'Hello World';
let specIndex = 6;
let ent_str = 'Boring '
let result = string.substring(0, specIndex) + ent_str +
string.substring(specIndex);
document.write("<br>The resultant string becomes: ", result); </script>
</script>
</body>

</html>

Q4.
<!DOCTYPE html>
<html>
<head>
<title>Empty Strong</title>
</head>
 39

<body>
<script>
string = prompt('Enter a string')
if(string.length>0){document.write('The string is not empty')}
else{document.write('The string is empty')}
</script>
</body>
</html>

Class: XI Subject: Web Application

Week: 30
Topic: JavaScript

Do in a MS Word document.
Save word document as Name_JSCW
Upload in Teams

Theory questions:-
eBook - Pg 221 Q5, 6, 7, 8, 13 ( Do not type the questions)

Practical question:- (Paste both code and output snips)

Take a string in a variable and display the use of any four string functions on
it. Give proper display statements.
 40

<html>
<body>
<script type="text/javascript">
//Take a string in a variable and display the use of any four string functions
on it.

var x = "This is my first script in JavaScript";

//search
let position= x.search("script");
//substring
let result = x.substring(0, 23);
document.write("The length is "+x.length);//lenght
document.write("<br>The search is"+position);
document.write("<br>The substring is-"+result);
</script>
</body>
</html>
 41

Switch Case

Q)Take a single character from the user and check if it's a vowel or not.
Display which vowel entered as well
<html>
<title>Vowels</title>
<body>
<script type="text/Javascript">
//Take single character from user and check if its vowel or not.Display which
vowel entered as well
var alpha=(prompt("Enter a letter"));
utxt= alpha.toUpperCase();
switch(utxt)
{
case "A": chr="Vowel";
break;
case "E": chr="Vowel";
break;
case "I": chr="Vowel";
break;
case "O": chr="Vowel";
break;
case "U": chr="Vowel";
break;
default:chr="Consonant";
}
document.write("The letter is "+utxt+" is a "+chr);
</script>
</body>
 42

</html>

Q) Take date from system and display the day

<html>
<title>Day</title>
<body>
<script type="text/Javascript">
//Take date from system and display the day
var d = new Date();
hr = d.getDay();
switch(hr)
{
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
 43

break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
document.write("Today is " + day);
</script>
</body>
</html>
 44

Nested If

Q)If a student has an amount greater than rs 50 he uses an auto , else if he

has an amount between rs 20 to rs 50 he uses the shared auto else if he

has between rs 5 to rs 20 he uses the public bus or else he walks to his

school. WAP using the if-else condition

ANS-

<HTML>

<TITLE>Amount1</TITLE>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

var num1=prompt("Enter the amount");

if(num1>50)

document.write("He will use auto")

if(num1>20&&num1<=50)

document.write("He will use shared auto")

if(num1>=5&&num1<=20)

document.write("He will use public bus")

 45

else

document.write("He will walk")

</SCRIPT>

</BODY>

</HTML>
 46

WAP to enter time in 24 hours format. If time is less

than 10:00 display good morning, if not but less than
20:00 display a good day greetings otherwise a good
evening greeting
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<script>
 47

//WAP to enter time in 24 hours format. If time is less than 10:00 display
good morning, if not but less than 20:00 display a good day greetings
otherwise a good evening greeting
var d = new Date();
var hr = d.getHours();
if (hr < 10) {
document.write("Good Morning! ");
}
else if(hr < 20) {
document.write("Good Day!");
}
else {
document.write("Good Evening!");
}
</script>
</BODY>
</HTML>