IGNOU BCA (4) /MCA (1) : MCSL-016 Solved Assignment: Education Is The Key To Get Success

LEARNING SCIENCE
IGNOU BCA(4)/MCA(1):
MCSL-016 Solved Assignment
Education is the Key to Get Success
By Prasanta Naskar
2019-2020
WWW.LEARNINGSCIENCE.CO.IN
IGNOU BCA(4)/MCA(1): MCSL-016 Solved Assignment 2019-2020
Course Code : MCSL-016

Course Title : Internet Concepts and Web Design (Lab Course)
Assignment Number : BCA(4)/016/Assignment/2019-20
Maximum Marks : 100
Weightage : 25%
Last Dates for Submission : 15th October, 2019 (For July 2019 Session)
: 15th April, 2020 (For January 2020 Session)
There are two questions in this assignment carrying a total of 80 marks. Rest 20 marks are for viva voce. You
may use illustrations and diagrams to enhance the explanations. Please go through the guidelines regarding
assignments given in the Programme Guide for the format of presentation. Submit the screenshots along with
the coding and documentation.
Q1. (10+20+20+20=70)
An Online Examination company conducts examination for the registered students. At the beginning of each
month, company announces the Examination Schedule of the month. This schedule includes date of examination,
subject of examination, fee and venue of the examination. A student needs to register himself/herself for the
examination of her/his choice. Create four web pages for the web site for this Online Examination Company having
the following features:
For the sake of consistency every page of the website should consists of four basic divisions –
Header – This division should be of fixed size and should display name and logo of the online Examination
Company. This division should be in different background colour.
Footer - This division contains the name of developer of the website and copyright information, if any.
Content - The pages that you are designing should differ in this Division only. The four different pages that you
need to design are - Home, Monthly Schedule, Syllabus and Registration.
Menu - This division should be towards the left in every web page and should contain links to all the web pages viz.
Home, Monthly Schedule, Syllabus and Registration.
The Content division of the different pages should be as under:
Home page should include Welcome message, year of establishment of online examination company and
brief details of the company.
Monthly Schedule page should show the Schedule of the month. This schedule should include date of
examination, subject of examination, fee and venue of the examination. You must make this list using
Table tags.
Syllabus page displays the syllabus of various examinations. The page should be linked to Subject of
examination.
Registration page should contain a form which should have fields - name of the student appearing in examination,
his/her date of birth, and email Id. You must use JavaScript to check that all the fields are filled by the person
registering for an online examination.
Q2. List five important features of CSS and AngularJS (10)
www.learningscience.co.in Page 2
Q1. An Online Examination company conducts examination for the registered students. At the
beginning of each month, company announces the Examination Schedule of the month. This schedule
includes date of examination, subject of examination, fee and venue of the examination. A student
needs to register himself/herself for the examination of her/his choice. Create four web pages for the
web site for this Online Examination Company having the following features:
For the sake of consistency every page of the website should consists of four basic divisions –
Header – This division should be of fixed size and should display name and logo of the online
Examination Company. This division should be in different background colour.
Footer - This division contains the name of developer of the website and copyright information, if any.
Content - The pages that you are designing should differ in this Division only. The four different pages
that you need to design are - Home, Monthly Schedule, Syllabus and Registration.
Menu - This division should be towards the left in every web page and should contain links to all the
web pages viz. Home, Monthly Schedule, Syllabus and Registration.
The Content division of the different pages should be as under:
Home page should include Welcome message, year of establishment of online examination
company and brief details of the company.
Monthly Schedule page should show the Schedule of the month. This schedule should include
date of examination, subject of examination, fee and venue of the examination. You must make
this list using Table tags.
Syllabus page displays the syllabus of various examinations. The page should be linked to
Subject of examination.
Registration page should contain a form which should have fields - name of the student
appearing in examination, his/her date of birth, and email Id. You must use JavaScript to check
that all the fields are filled by the person registering for an online examination.
Solution:
Home.html
<!DOCTYPE html>
<html>
<head>
<title> Home </title>
</head>
<body>
<div style="position: absolute; left: 100px; top: 5px; align: center; width: 250px; background-color:
#aaffaa; height: 50px">
<a href=https://learningscience.co.in/wp-content/uploads/2019/08/LOGO-1.png
><a href="https://learningscience.co.in/wp-content/uploads/2019/08/LOGO-1.png">
<img src="LOGO 1.png" alt="Logo" width="50" height="50" border="0"></a></div>
<div style="position:absolute;left:160px;top:5px;align:center; background-color: #aaffaa; height:50px;

width:1024px; text align: center; font-size:30px; font-weight: bold"> Online Examination System </div>
<div style="position:absolute;left:100px;top:60px;align:center; width:250px;background-

color:#10ffaa;height:600px">
<a href="home.html">Home</a>
<br/>
<a href="schedule.html">Monthly Schedule</a>
<br/>
<a href="syllabus.html">Syllabus</a>
<br/>
<a href="Registration.html">Registration</a>
<br/>
</div>
<div style="position: absolute; left: 415px;top:60px;align:center; height: 500px; width: 600px; text-
align: center; fontsize: 30px; font-weight: bold">
<h2>Welcome to Online Examination System</h2>
<p> The Learning Science Conducts and Provides Online Examination Services in all areas of education,
both within India and Abroad. </p>
<h4> Established in 2015</h4>
<a href="https://kypsupportblog.files.wordpress.com/2018/10/online-exam.jpg?w=147&h=181">
<img src="online-exam.jpg" alt="Online Exam System" width="full" height="184" border="0">
</a>
<p>Learning Science is emerging platform for all corporate to asses fresh and experienced resources
available in the market. It is perfectly and precisely designed for corporate to conduct test and provide
immediate results of the assessment. Learning Science is assuring 100% data security to every corporate
by providing special access for them.</p>
<p>It is one of the trustworthy platform for corporate in order to conduct any assessments. Learning
Science assures you quality resources for every corporate through their special assessment platform. It
has unique features which will make your work easy than conventional recruitment procedure. </p>
</div>
<div style="position: absolute; left: 100px; top: 650px; align: center; background-color: #A52A2A; color:
white; height: 30px; width: 1068px; text align: center; font-size: 20px; font-weight: bold"> Designed by
BCA/MCA Students of IGNOU, Kolkata.</div>
</body>
</html>
Output:
Schedule.html
<!DOCTYPE html>
<html>
<head> <title> Schedule </title> </head>
<body>
#aaffaa; height:50px">
<a href="https://learningscience.co.in/wp-content/uploads/2019/08/LOGO-1.png">
<div style="position: absolute; left: 162px; top: 5px; align: center; background-color: #aaffaa; height:
50px; width: 1024px; text align: center; font-size: 30px; font-weight: bold"> Online Examination System
</div>
<div style="position:absolute;left:100px;top:60px;align:center;width :250px;background-

color:#10ffaa;height:800px"> <a href="home.html">Home</a>
<br/>
<br/>
<br/>
<a href="registration.html">Registration</a>
<br/>
</div>
<div style="position:absolute;left:415px;top:60px;align:center;height:500px;width:600px; text-

align:center;font-size:30px;font weight: bold">
<h2> Exam Schedule</h2>
<table border="1" align="center">
<tr>
<th>Subject</th>
<th>Date of Exam</th>
<th>Time of Exam</th>
<th>Exam Fee</th>
<th>Venue</th>
</tr>
<tr>
<td align="center">C++</td>
<td align="center">22/10/2019</td>
<td align="center">10:00am</td>
<td align="center">Rs.500</td>
<td align="center">Technoworld, Jadavpur (Kolkata) </td>
</tr>
<tr>
<td align="center">HTML</td>
<td align="center">10:00pm</td>
<td align="center"> Loretto Building, Salt Lake (Kolkata) </td>
</tr>
<tr>
<td align="center">Java</td>
<td align="center">10:00am</td>
<td align="center"> Technoworld, Jadavpur (Kolkata) </td>
</tr>
<tr>
<td align="center">Python</td>
<td align="center">12:30pm</td>
<td align="center"> Loretto Building, Salt Lake (Kolkata) </td>
</tr>
</table>
</div>
BCA/MCA Students of IGNOU, Kolkata. </div>
<body>
</html>
Output:
Syllabus.html
<!DOCTYPE html>
<html>
<head> <title> Syllabus </title> </head>
<body>
#aaffaa; height: 50px">
<div style="position: absolute; left: 162px; top: 5px; align: center; background-color: #aaffaa; height:
50px; width: 1024px; text align: center; font-size: 30px; font-weight: bold"> Online Examination System
</div>

color:#10ffaa;height:500px">
<a href="home.html">Home</a>
<br/>
<br/>
<br/>
<a href="registration.html">Registration</a>
<br/>
</div>
<div style="position: absolute; left: 415px; top: 60px; align: center; height: 500px; width: 600px; text-
align: center; font-size: 30px; font weight: bold">
<h2>Syllabus</h2>
<a href="syllabus_c++.pdf">C++</a>
</br>
<a href="syllabus_java.pdf">HTML</a>
</br>
<a href="syllabus_html.pdf">Java</a>
</br>
<a href="syllabus_pyth.pdf">Python</a></br>
</div>
<body>
</html>
Output:
Registration.html
<html>
<head>
<script type = "text/javascript">
function display()
var name = document.forms["f1"]["t1"].value;
var mail = document.forms["f1"]["t2"].value;
var ename = document.forms["f1"]["t3"].value;
var dt = document.forms["f1"]["t4"].value;
document.write("Name: "+name);
document.write("<br>");
document.write("Email: "+mail);
document.write("Exam Subject: "+ename);
document.write("Registration Date: "+dt);
document.write("<br><br><br><br>");
document.write("Registration Successfully Done");
function validate()
if( document.myForm.t1.value == "" )
alert( "Please provide your name!" );
document.myForm.t1.focus() ;
return false;
alert( "Please provide your Email Address!" );
return false;
alert( "Please provide your Subject!" );
return false;
alert( "Please provide your DOB!" );
return false;
return display();
</script>
<meta charset="utf-8">
<style type="text/css">
body {
margin-left: 100px;
</style>
</head>
<body>
<div style="position:absolute; left:100px; top:5px; align:center; w idth:250px ;background-color:#aaffaa;

height:50px"><a href="https://learningscience.co.in/wp-content/uploads/2019/08/LOGO-1.png"><a
href="https://learningscience.co.in/wp-content/uploads/2019/08/LOGO-1.png"><img src="LOGO
1.png" alt="Logo" width="50" height="50" border="0"></a></div>
<div style="position:absolute;left:162px;top:5px;align:center; background-

color:#aaffaa;height:50px;width:1024px;text align:center;font-size:30px;font-weight:bold"> Online
Examination System </div>

color:#10ffaa;height:600px"> <a href="home.html">Home</a>
<br/>
<br/>
<br/>
<a href="Registration.html">Registration</a>
<br/>
</div>
<div style="position:absolute;left:415px;top:60px;align:center;heigh t:500px;width:600px; text-

align:center;font-size:30px;font weight:bold">
<div style="align:center">
<h2>Registration</h2></div>
<table border="1" align="center">
<form id="f1" name="myForm" onsubmit = "return(validate());" style="position:relative;left:305px">
<tr>
<td>Name</td>
<td><input type="text" name="t1"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" name="t2"></td>
</tr>
<tr>
<td>Exam</td>
<td><select id="t3">
<option value>Select</option>
<option>C++</option>
<option>HTML</option>
<option>Java</option>
<option>Python</option>
</select></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="date" name="t4"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Register"><input type="reset"></td>
</tr>
</form>
white; height: 30px; width: 1024px; text align:left;font-size: 20px; font-weight: bold"> Designed by
<body>
</html>
Output:
Q2. List five important features of CSS and AngularJS
Solution:
Features of CSS
CSS Animations and Transitions
CSS animations are finally available in all major browsers, even in IE (since version 10). There are two
ways to create CSS animations. The first is very easy, it is done through animating the changes of CSS
properties with the transition declaration. With transitions, you can create hover or mouse down
effects, or you can trigger the animation by changing the style of an element with JavaScript. You can
see the transition below by hovering over the planet - this will cause the rocket to close in.
Advanced Selectors
These days, if you assign IDs to elements only so you can style them, you are probably doing it wrong.
CSS 2.1 and CSS 3 introduced a number of powerful selectors that can make your layouts cleaner, and
your stylesheets more awesome.
Calculating Values With calc()
Another new and awesome CSS feature is the calc() function. It allows you to do simple arithmetic
calculations in CSS. You can use it anywhere a length or a size is required. What is even cooler, is that
you can freely mix different units, like percentages and pixels. This makes a lot of layout hacks that you
might have used in the past obsolete.
Generated Content and Counters
Generated content is a powerful tool in the hands of developers, made available by

the ::before and ::after pseudo elements. This feature lets you use less HTML to achieve the same
layouts. This is especially beneficial in cases where you need extra box shadows or other visual elements
that would require extra spans or divs.
Gradients
Gradients give web designers the power to create smooth transitions between colors without having to
resort to images. CSS gradients also look great on retina displays, because they are generated on the fly.
They can be linear or radial, and can be set to repeat.
Features of AngularJS
The MVC Framework
AngularJS provides developers with "Model View Control" architecture which is perfect for dynamic
modeling. As you may already know, any application is built from a process of combining modules
together. These modules work using different logics that are initialized according to individual needs.
Developers need to build components separately then combine them together with code.
MVC with AngularJS makes it easier for developers to build client-side web applications. All the
necessary elements are developed separately and combined automatically, which saves developers a
great deal of additional time and effort.
HTML User Interface
Another great feature of AngularJS is the fact that it uses the HTML language to build user interfaces.
The HTML language is a common and declarative language with very short tags that are simple to
understand. This leads to a more organised and simplistic UI. JavaScript interfaces are often more
complicated to develop and organise. If you're looking for a solution that's quick, simple, and easy to use
at a moment's notice, then this could be it.
Access to the POJO Model
AngularJS also uses the "plain old JavaScript objects" model, which is very self-sufficient and highly
functional. Earlier data models used to have to keep monitoring the data flow in an application.
However, a POJO data model simply offers very well-planned objects and logics. Developers only need
to create loops with the right properties and play around to get the best results. This means that
developers can get the clear code they need for highly interactive and user-friendly apps.
Behaviour with Directives
Angular provides extra functionality with the HTML language using directives. The additional elements in
the system can be accessed with no need for the DOM to simulate additional elements. The controller
doesn't need to manipulate the DOM directly, as this should be done through directives. Directives
make up a separate part of the element set which can be used anywhere other than in a web
application. Directives give developers the element-rich HTML they need to strengthen their online
presence.
Filtering
As you might naturally guess, filters in the AngularJS framework simply filter out the data before it
reaches the view. They perform paginations, as well as filtering data arrays with respect to available
parameters. The functions can be modified according to the ideal parameters in your system, but these
are the only data transformation tasks done. The system works by putting information into the right
format before it's delivered to the end-user. For instance, it might put a decimal point in a number
before reversing the order of numbers in a desired range.
Thank You
For More Visits: https://learningscience.co.in
WhatsApp No.: 7980608289

IGNOU BCA (4) /MCA (1) : MCSL-016 Solved Assignment: Education Is The Key To Get Success

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IGNOU BCA (4) /MCA (1) : MCSL-016 Solved Assignment: Education Is The Key To Get Success

Uploaded by

Copyright:

Available Formats

LEARNING SCIENCE

Course Code : MCSL-016

The Content division of the different pages should be as under:

Q2. List five important features of CSS and AngularJS (10)

The Content division of the different pages should be as under:

<title> Home </title>

<img src="LOGO 1.png" alt="Logo" width="50" height="50" border="0"></a></div>

<div style="position:absolute;left:160px;top:5px;align:center; background-color: #aaffaa; height:50px;

<div style="position:absolute;left:100px;top:60px;align:center; width:250px;background-

<a href="schedule.html">Monthly Schedule</a>

<h2>Welcome to Online Examination System</h2>

<h4> Established in 2015</h4>

<img src="online-exam.jpg" alt="Online Exam System" width="full" height="184" border="0">

<head> <title> Schedule </title> </head>

<img src="LOGO 1.png" alt="Logo" width="50" height="50" border="0"></a></div>

<div style="position:absolute;left:100px;top:60px;align:center;width :250px;background-

<a href="schedule.html">Monthly Schedule</a>

<div style="position:absolute;left:415px;top:60px;align:center;height:500px;width:600px; text-

<h2> Exam Schedule</h2>

<table border="1" align="center">

<td align="center">Technoworld, Jadavpur (Kolkata) </td>

<td align="center"> Loretto Building, Salt Lake (Kolkata) </td>

<td align="center"> Technoworld, Jadavpur (Kolkata) </td>

<td align="center"> Loretto Building, Salt Lake (Kolkata) </td>

<head> <title> Syllabus </title> </head>

<img src="LOGO 1.png" alt="Logo" width="50" height="50" border="0"></a></div>

<div style="position:absolute;left:100px;top:60px;align:center;width :250px;background-

<a href="schedule.html">Monthly Schedule</a>

<script type = "text/javascript">

var name = document.forms["f1"]["t1"].value;

var mail = document.forms["f1"]["t2"].value;

var ename = document.forms["f1"]["t3"].value;

document.write("Exam Subject: "+ename);

document.write("Registration Date: "+dt);

document.write("Registration Successfully Done");

if( document.myForm.t1.value == "" )

alert( "Please provide your name!" );

if( document.myForm.t2.value == "" )

alert( "Please provide your Email Address!" );

if( document.myForm.t3.value == "" )

alert( "Please provide your Subject!" );

if( document.myForm.t4.value == "" )

alert( "Please provide your DOB!" );

<div style="position:absolute; left:100px; top:5px; align:center; w idth:250px ;background-color:#aaffaa;

<div style="position:absolute;left:162px;top:5px;align:center; background-

<div style="position:absolute;left:100px;top:60px;align:center;width :250px;background-

<a href="schedule.html">Monthly Schedule</a>

<div style="position:absolute;left:415px;top:60px;align:center;heigh t:500px;width:600px; text-

<table border="1" align="center">

<form id="f1" name="myForm" onsubmit = "return(validate());" style="position:relative;left:305px">

<td><input type="text" name="t1"></td>

<td><input type="email" name="t2"></td>

<td><input type="date" name="t4"></td>

<td colspan="2"><input type="submit" value="Register"><input type="reset"></td>

Q2. List five important features of CSS and AngularJS

CSS Animations and Transitions

Calculating Values With calc()

Generated Content and Counters

Generated content is a powerful tool in the hands of developers, made available by

The MVC Framework

HTML User Interface

Access to the POJO Model

Behaviour with Directives