diff --git a/function.js b/function.js
new file mode 100644
index 00000000..1ef244d8
--- /dev/null
+++ b/function.js
@@ -0,0 +1,386 @@
+window.view = {
+ i: 0,
+ area: 0,
+ totalArea: 0,
+ correctInputs: 0,
+ disableElement: function(buttonId) {
+ document.getElementById(buttonId).disabled = true
+ },
+ enableElement: function(buttonId) {
+ document.getElementById(buttonId).disabled = false
+ },
+ hideInstructions: function() {
+ document.getElementById('instructions').className = 'hide'
+ },
+ showInstructions: function() {
+ document.getElementById('instructions').className = 'questionBlock'
+ },
+ activateClicks: function() {
+ this.addClickEvent('imageSquare', function() { view.showSquareInputs() })
+ this.addTouchEvent('imageSquare', function() { view.showSquareInputs() })
+ this.addClickEvent('okSquare', function() { view.validateSquareInputs() })
+ this.addClickEvent('imageRightangledtriangle', function() { view.showRightangledtriangleInputs() })
+ this.addClickEvent('okRightangledtriangle', function() { view.validateRightangledtriangleInputs() })
+ this.addClickEvent('imageTriangle', function() { view.showTriangleInputs() })
+ this.addClickEvent('okTriangle', function() { view.validateTriangleInputs() })
+ this.addClickEvent('imageCircle', function() { view.showCircleInputs() })
+ this.addClickEvent('okCircle', function() { view.validateCircleInputs() })
+ this.addClickEvent('btnExecute', function() { view.calculateArea() })
+ },
+ unCheckRadioButtons: function() {
+ var elements = document.getElementsByClassName('radiobutton')
+ for ( i = 0 ; i < elements.length ; i ++ )
+ elements[i].checked = false
+ },
+ hideQuestionBlock: function(id1, id2) {
+ document.getElementById(id1).className = 'questionBlock hide'
+ document.getElementById(id2).style.opacity = '0.3'
+ },
+ showQuestionBlock: function(id1, id2) {
+ document.getElementById(id1).className = 'questionBlock'
+ document.getElementById(id2).style.opacity = '1'
+ },
+ showSquareInputs: function() {
+ this.hideQuestionBlock('questionRightangledtriangle', 'imageRightangledtriangle')
+ this.hideQuestionBlock('questionCircle', 'imageCircle')
+ this.hideQuestionBlock('questionTriangle', 'imageTriangle')
+ this.showQuestionBlock('questionSquare', 'imageSquare')
+ this.hideInstructions()
+ this.unCheckRadioButtons()
+ },
+ showRightangledtriangleInputs: function() {
+ this.hideQuestionBlock('questionSquare', 'imageSquare')
+ this.hideQuestionBlock('questionCircle', 'imageCircle')
+ this.hideQuestionBlock('questionTriangle', 'imageTriangle')
+ this.showQuestionBlock('questionRightangledtriangle', 'imageRightangledtriangle')
+ this.hideInstructions()
+ this.unCheckRadioButtons()
+ },
+ showTriangleInputs: function() {
+ this.hideQuestionBlock('questionRightangledtriangle', 'imageRightangledtriangle')
+ this.hideQuestionBlock('questionSquare', 'imageSquare')
+ this.hideQuestionBlock('questionCircle', 'imageCircle')
+ this.showQuestionBlock('questionTriangle', 'imageTriangle')
+ this.hideInstructions()
+ this.unCheckRadioButtons()
+ },
+ showCircleInputs: function() {
+ this.hideQuestionBlock('questionSquare', 'imageSquare')
+ this.hideQuestionBlock('questionRightangledtriangle', 'imageRightangledtriangle')
+ this.hideQuestionBlock('questionTriangle', 'imageTriangle')
+ this.showQuestionBlock('questionCircle', 'imageCircle')
+ this.hideInstructions()
+ this.unCheckRadioButtons()
+ },
+ approveRightangledtriangleInputs: function() {
+ this.displayFunctionForRightangledtriangle()
+ this.showInstructions()
+ document.getElementById('questionRightangledtriangle').className = 'questionBlock hide'
+ document.getElementById('imageRightangledtriangle').className += ' disabledImage'
+ document.getElementById('tickRightangledtriangle').className = 'tick'
+ document.getElementById('imageRightangledtriangle').style.opacity = '0.3'
+ this.i ++
+ this.replaceDivs()
+ },
+ approveSquareInputs: function() {
+ this.displayFunctionForSquare()
+ this.showInstructions()
+ document.getElementById('questionSquare').className = 'questionBlock hide'
+ document.getElementById('imageSquare').className += ' disabledImage'
+ document.getElementById('tickSquare').className = 'tick'
+ document.getElementById('imageSquare').style.opacity = '0.3'
+ this.i ++
+ this.replaceDivs()
+ },
+ approveCircleInputs: function() {
+ this.displayFunctionForCircle()
+ this.showInstructions()
+ document.getElementById('questionCircle').className = 'questionBlock hide'
+ document.getElementById('imageCircle').className += ' disabledImage'
+ document.getElementById('tickCircle').className = 'tick'
+ document.getElementById('imageCircle').style.opacity = '0.3'
+ this.i ++
+ this.replaceDivs()
+ },
+ approveTriangleInputs: function() {
+ this.displayFunctionForTriangle()
+ this.showInstructions()
+ document.getElementById('questionTriangle').className = 'questionBlock hide'
+ document.getElementById('imageTriangle').className += ' disabledImage'
+ document.getElementById('tickTriangle').className = 'tick'
+ document.getElementById('imageTriangle').style.opacity = '0.3'
+ this.i ++
+ this.replaceDivs()
+ },
+ validateSquareInputs: function() {
+ var options1, options2, options3, options4
+ var a, b, c, d
+ options1 = document.getElementsByName('radio_group1')
+ for ( i = 0 ; i < options1.length ; i++ ) {
+ if ( options1[i].checked )
+ a = options1[i].value
+ options1[i].checked = false
+ }
+ options2 = document.getElementsByName('radio_group2')
+ for ( i = 0 ; i < options2.length ; i++ ) {
+ if ( options2[i].checked )
+ b = options2[i].value
+ options2[i].checked = false
+ }
+ options3 = document.getElementsByName('radio_group3')
+ for ( i = 0 ; i < options3.length ; i++ ) {
+ if ( options3[i].checked )
+ c = options3[i].value
+ options3[i].checked = false
+ }
+ options4 = document.getElementsByName('radio_group4')
+ for ( i = 0 ; i < options4.length ; i++ ) {
+ if ( options4[i].checked )
+ d = options4[i].value
+ options4[i].checked = false
+ }
+ if ( a !== '1')
+ alert('Incorrect value of input variables(arguments). Calculating the area of a square only requires the length of the side of the square. Try again.')
+ else if ( b !== 'float' )
+ alert('Incorrect datatype of input variables(arguments). The value of the side of a square need not be an integer. Try again.')
+ else if ( c !== 'float' )
+ alert('Incorrect datatype for return type. The value of the area of a square need not be an integer. Try again.')
+ else if ( d !== 'a*a' )
+ alert('Incorrect formula for calculating the area of a square. Try again.')
+ else
+ this.approveSquareInputs()
+ },
+ validateRightangledtriangleInputs: function() {
+ var options1, options2, options3, options4
+ var a, b, c, d
+ options1 = document.getElementsByName('radio_group5')
+ for ( i = 0 ; i < options1.length ; i++ ) {
+ if ( options1[i].checked )
+ a = options1[i].value
+ options1[i].checked = false
+ }
+ options2 = document.getElementsByName('radio_group6')
+ for ( i = 0 ; i < options2.length ; i++ ) {
+ if ( options2[i].checked )
+ b = options2[i].value
+ options2[i].checked = false
+ }
+ options3 = document.getElementsByName('radio_group7')
+ for ( i = 0 ; i < options3.length ; i++ ) {
+ if ( options3[i].checked )
+ c = options3[i].value
+ options3[i].checked = false
+ }
+ options4 = document.getElementsByName('radio_group8')
+ for ( i = 0 ; i < options4.length ; i++ ) {
+ if ( options4[i].checked )
+ d = options4[i].value
+ options4[i].checked = false
+ }
+ if ( a !== '2')
+ alert('Incorrect value of input variables(arguments). Calculating the area of a Rightangledtriangle requires the length base and height of the Rightangledtriangle. Try again.')
+ else if ( b !== 'float' )
+ alert('Incorrect datatype of input variables(arguments). The value of the sides of a Rightangledtriangle need not be integers. Try again.')
+ else if ( c !== 'float' )
+ alert('Incorrect datatype for return type. The value of the area of a Rightangledtriangle need not be an integer. Try again.')
+ else if ( d !== '0.5*a*b' )
+ alert('Incorrect formula for calculating the area of a Rightangledtriangle. Try again.')
+ else
+ this.approveRightangledtriangleInputs()
+ },
+ validateTriangleInputs: function() {
+ var options1, options2, options3, options4
+ var a, b, c, d
+ options1 = document.getElementsByName('radio_group9')
+ for ( i = 0 ; i < options1.length ; i++ ) {
+ if ( options1[i].checked )
+ a = options1[i].value
+ options1[i].checked = false
+ }
+ options2 = document.getElementsByName('radio_group10')
+ for ( i = 0 ; i < options2.length ; i++ ) {
+ if ( options2[i].checked )
+ b = options2[i].value
+ options2[i].checked = false
+ }
+ options3 = document.getElementsByName('radio_group11')
+ for ( i = 0 ; i < options3.length ; i++ ) {
+ if ( options3[i].checked )
+ c = options3[i].value
+ options3[i].checked = false
+ }
+ options4 = document.getElementsByName('radio_group12')
+ for ( i = 0 ; i < options4.length ; i++ ) {
+ if ( options4[i].checked )
+ d = options4[i].value
+ options4[i].checked = false
+ }
+ if ( a !== '1')
+ alert('Incorrect value of input variables(arguments). Calculating the area of an equilateral triangle only requires the length of one of the sides of the triangle. Try again.')
+ else if ( b !== 'float' )
+ alert('Incorrect datatype of input variables(arguments). The value of the side of an equilateral triangle need not be an integer. Try again.')
+ else if ( c !== 'float' )
+ alert('Incorrect datatype for return type. The value of the area of an equilateral triangle need not be an integer. Try again.')
+ else if ( d !== 'correct' )
+ alert('Incorrect formula for calculating the area of an equilateral triangle. Try again.')
+ else
+ this.approveTriangleInputs()
+ },
+ validateCircleInputs: function() {
+ var options1, options2, options3, options4
+ var a, b, c, d
+ options1 = document.getElementsByName('radio_group13')
+ for ( i = 0 ; i < options1.length ; i++ ) {
+ if ( options1[i].checked )
+ a = options1[i].value
+ options1[i].checked = false
+ }
+ options2 = document.getElementsByName('radio_group14')
+ for ( i = 0 ; i < options2.length ; i++ ) {
+ if ( options2[i].checked )
+ b = options2[i].value
+ options2[i].checked = false
+ }
+ options3 = document.getElementsByName('radio_group15')
+ for ( i = 0 ; i < options3.length ; i++ ) {
+ if ( options3[i].checked )
+ c = options3[i].value
+ options3[i].checked = false
+ }
+ options4 = document.getElementsByName('radio_group16')
+ for ( i = 0 ; i < options4.length ; i++ ) {
+ if ( options4[i].checked )
+ d = options4[i].value
+ options4[i].checked = false
+ }
+ if ( a !== '1')
+ alert('Incorrect value of input variables(arguments). Calculating the area of circle only requires the radius. Try again.')
+ else if ( b !== 'float' )
+ alert('Incorrect datatype of input variables(arguments). The value of the radius of the circle need not be an integer. Try again.')
+ else if ( c !== 'float' )
+ alert('Incorrect datatype for return type. The value of the area of the circle need not be an integer. Try again.')
+ else if ( d !== 'pi*a*a' )
+ alert('Incorrect formula for calculating the area of the circle. Try again.')
+ else
+ this.approveCircleInputs()
+ },
+ displayFunctionForSquare: function() {
+ document.getElementById('functionSquare').innerHTML += 'float area_sq (float a)
{
float area = a*a;
return area;
}'
+ },
+ displayFunctionForRightangledtriangle: function() {
+ document.getElementById('functionRightangledtriangle').innerHTML += 'float area_rect (float a,float b)
{
float area = 0.5*a*b;
return area;
}'
+ },
+ displayFunctionForTriangle: function() {
+ document.getElementById('functionTriangle').innerHTML += 'float area_triangle (float a)
{
float area = (sqrt(3)/4.0)*a*a;
return area;
}'
+ },
+ displayFunctionForCircle: function() {
+ document.getElementById('functionCircle').innerHTML += 'float area_circle (float a)
{
float area = 3.14*a*a;
return area;
}'
+ },
+ addClickEvent: function(id, method) {
+ var element = document.getElementById(id)
+ element.addEventListener('click', method, false)
+ },
+ addMouseOverEvent: function(id, method) {
+ var element = document.getElementById(id)
+ element.addEventListener('mouseover', method, false)
+ },
+ addMouseOutEvent: function(id, method) {
+ var element = document.getElementById(id)
+ element.addEventListener('mouseout', method, false)
+ },
+ addTouchEvent: function(id, method) {
+ var element = document.getElementById(id)
+ element.addEventListener('touchend', method, false)
+ },
+ replaceDivs: function() {
+ if ( this.i === 4 ) {
+ this.hideInstructions()
+ document.getElementById('imageBlock').className = 'imageBlock hide'
+ document.getElementById('imageComplex').className = 'imageComplex'
+ document.getElementById('calculateArea').className = 'questionBlock'
+ }
+ },
+ area_sq: function( param, functionCall ) {
+ this.area = param * param
+ this.totalArea += this.area
+ alert( 'area from function call ' + String( i + 1 ) + ' ) : ' + functionCall + ' is ' + this.area )
+ this.correctInputs ++
+ },
+ area_triangle: function( param, functionCall ) {
+ this.area = Math.sqrt(3)/4 * param * param
+ this.totalArea += this.area
+ alert( 'area from function call ' + String( i + 1 ) + ' ) : ' + functionCall + ' is ' + this.area )
+ this.correctInputs ++
+ },
+ area_circle: function( param, functionCall ) {
+ this.area = Math.PI * param * param
+ this.totalArea += this.area
+ alert( 'area from function call ' + String( i + 1 ) + ' ) : ' + functionCall + ' is ' + this.area )
+ this.correctInputs ++
+ },
+ area_Rightangledtriangle: function( param, functionCall ) {
+ this.area = 0.5 * Number(param[0]) * Number(param[1])
+ this.totalArea += this.area
+ alert( 'area from function call ' + String( i + 1 ) + ' ) : ' + functionCall + ' is ' + this.area )
+ this.correctInputs ++
+ },
+ resetToInitialState: function() {
+ document.getElementById('imageBlock').className = 'imageBlock'
+ document.getElementById('imageComplex').className = 'imageComplex hide'
+ document.getElementById('calculateArea').className = 'questionBlock hide'
+ document.getElementById('imageSquare').className = 'imageSquare'
+ document.getElementById('imageRightangledtriangle').className = 'imageRightangledtriangle'
+ document.getElementById('imageTriangle').className = 'imageTriangle'
+ document.getElementById('imageCircle').className = 'imageCircle'
+ document.getElementById('tickSquare').className = 'tick hide'
+ document.getElementById('tickRightangledtriangle').className = 'tick hide'
+ document.getElementById('tickCircle').className = 'tick hide'
+ document.getElementById('tickTriangle').className = 'tick hide'
+ document.getElementById('functionSquare').innerHTML = ''
+ document.getElementById('functionRightangledtriangle').innerHTML = ''
+ document.getElementById('functionCircle').innerHTML = ''
+ document.getElementById('functionTriangle').innerHTML = ''
+ document.getElementById('instructions').className = 'questionBlock'
+ this.i = 0
+ this.area = 0
+ this.totalArea = 0
+ this.correctInputs = 0
+ },
+ calculateArea: function() {
+ var elements = document.getElementById('inputBoxSection').childNodes
+ for ( i = 0 ; i < elements.length ; i ++ ) {
+ var parsedValue = elements[i].value.replace(/\s/g, '')
+ var a = parsedValue.indexOf('(')
+ var b = parsedValue.indexOf(')')
+ parameter = parsedValue.substring(a+1, b)
+ parameter = parameter.split(',')
+ functionCall = parsedValue.replace(parameter, '')
+ if ( parameter.length === 1 ) {
+ parameter = Number(parameter)
+ if ( functionCall === 'area_sq()' && isNaN(parameter) === false )
+ this.area_sq(parameter, parsedValue)
+ else if ( functionCall === 'area_triangle()' && isNaN(parameter) === false )
+ this.area_triangle(parameter, parsedValue)
+ else if ( functionCall === 'area_circle()' && isNaN(parameter) === false )
+ this.area_circle(parameter, parsedValue)
+ else
+ alert( 'Incorrect function call at line ' + String( i + 1 ) )
+ }
+ else if ( parameter.length === 2 && functionCall === 'area_Rightangledtriangle()' && isNaN(parameter[0]) === false && isNaN(parameter[1]) === false )
+ this.area_Rightangledtriangle(parameter, parsedValue)
+ else
+ alert( 'Incorrect function call at line ' + String( i + 1 ) )
+ }
+ if ( this.correctInputs === 7 ) {
+ alert( 'Total area is : ' + this.totalArea + ' ' + ' ' + 'Correct value is : 132.01738' )
+ this.resetToInitialState()
+ }
+ else
+ alert( 'Some function calls were incorrect. Please try again !' )
+ },
+ init: function() {
+ this.activateClicks()
+ }
+}
+
+window.onload = function() { view.init() }
diff --git a/functions.css b/functions.css
new file mode 100644
index 00000000..a6d069ca
--- /dev/null
+++ b/functions.css
@@ -0,0 +1,511 @@
+*{padding: 0 ; margin: 0 ;}
+
+body {
+ min-height: 564px;
+ min-width: 1100px;
+ text-align: center;
+ height: 100%;
+ font-size: 100%;
+ position:absolute; top: 0%; bottom: 0%; right: 0%; left: 0%;
+}
+
+#header {
+ position: absolute;
+ top: 0;bottom: 0;left: 0;right: 0;
+ width: 100%;
+ height: 6%;
+ font-size: 4vh;
+ padding-top: 1.3vmin;
+}
+
+.button, .buttonDisable {
+ position: relative;
+ padding: 0.5em 1em;
+ cursor: pointer;
+ border-radius: 0.2em;
+ overflow: visible;
+ outline: none;
+ white-space: nowrap;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+ border: 1px solid #d4d4d4;
+ margin: 0;
+ text-align: center;
+ zoom: 1;
+ *display: inline;
+ text-decoration: none;
+ display: inline-block;
+}
+
+#header, .button {
+ text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
+ border-color: #3072b3;
+ border-bottom-color: #2a65a0;
+ color: #fff;
+ background-color: #3c8dde;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
+ background-image: -moz-linear-gradient(#599bdc, #3072b3);
+ background-image: -o-linear-gradient(#599bdc, #3072b3);
+ background-image: linear-gradient(#599bdc, #3072b3);
+}
+
+.buttonDisable {
+ text-shadow: 1px 1px 0 #fff;
+ color: #999999;
+ background-color: #ececec;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
+ background-image: -moz-linear-gradient(#f4f4f4, #ececec);
+ background-image: -ms-linear-gradient(#f4f4f4, #ececec);
+ background-image: -o-linear-gradient(#f4f4f4, #ececec);
+ background-image: linear-gradient(#f4f4f4, #ececec);
+}
+
+.buttonDisable::-moz-focus-inner, .button::-moz-focus-inner {
+ padding: 0;
+ border: 0;
+}
+
+.vlabsIcon {
+ position: absolute;
+ top: 1.2%;
+ left: 8%;
+ width: 15vh;
+ height: 6.7vh;
+ background-image: url('iiitLogo.png');
+ background-repeat: no-repeat;
+ background-color: transparent;
+}
+
+.inputDivision, .outputDivision, .executionDivision {
+ top: 11%;
+ height: 87%;
+ position: absolute;
+ border: 1px solid #CCC;
+ border-radius: 5px;
+ color: #464646;
+}
+
+.executionDivision {
+ left: 25%;
+ width: 30%;
+ overflow-x: auto;
+}
+
+.inputDivision {
+ left: 3%;
+ width: 19%;
+}
+
+.outputDivision {
+ left: 58%;
+ width: 39%;
+}
+
+.inputDivisionTitle, .outputDivisionTitle, .executionDivisionTitle {
+ text-align: center;
+ color: #2a65a0;
+ top: 0%;
+ height: 9%;
+ text-decoration: none;
+ text-align: center;
+ text-shadow: 1px 1px 0 #fff;
+ width: 100%;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ background-color: #F8F8F8;
+}
+
+.initializePic, .executionPic, .outputPic {
+ margin-left: 10%;
+ float: left;
+ height: 100%;
+ background-repeat: no-repeat;
+ background-color: transparent;
+}
+
+.initializePic {
+ margin-top: 1.5vh;
+ width: 20%;
+ background-image: url('initIcon.png');
+}
+
+.initializeText {
+ width: 60%;
+ float: left;
+ height: 100%;
+}
+
+.executionPic {
+ margin-top: 1vh;
+ width: 25%;
+ background-image: url('pageIcon.png');
+}
+
+.executionText {
+ text-align: left;
+ width: 50%;
+ float: left;
+ height: 100%;
+}
+
+.outputPic {
+ margin-top: 1.6vh;
+ width: 25%;
+ background-image: url('outputIcon.png');
+}
+
+.outputText {
+ text-align: left;
+ width: 50%;
+ float: left;
+ height: 100%;
+}
+
+.inputDivisionBody {
+ position: absolute;
+ top: 9%;
+ left: 0%;
+ width: 100%;
+ height: 91%;
+ text-align: center;
+ font-size: 1em;
+ border-top: 1px solid #CCC;
+ overflow: auto;
+}
+
+.questionBlock {
+ width: 100%;
+ height: 100%;
+ float: left;
+ min-width: 200px;
+}
+
+.questionText, .questionTextRich {
+ float: left;
+ text-align: left;
+ width: 95%;
+ min-width: 70px;
+ margin-left: 5%;
+ margin-top: 20px;
+}
+
+.programInitialization, .computeArea, .programTail{
+ padding: 5px;
+ float: left;
+ text-align: left;
+ width: 76%;
+ font-size: 17px;
+ margin-left: 10%;
+ margin-top: 10px;
+ border:1px solid #CCC;
+}
+
+.programInitialization {
+ height: 8%;
+}
+
+.computeArea {
+ height: 4%;
+}
+
+.programTail {
+ height: 15%;
+}
+
+.textArea {
+ margin-top: 10px;
+ text-align: center;
+ font-size: 15px;
+ float: left;
+ margin-left: 20%;
+ height: 26px;
+ width: 70%;
+ min-width: 100px;
+ border: 1px solid #CCC;
+ outline: none;
+ border-radius: 3px;
+}
+
+.imageSquare, .imageRightangledtriangle, .imageTriangle, .imageCircle {
+ position: absolute;
+ height: 49%;
+ width: 49%;
+ background-repeat: no-repeat;
+ background-color: transparent;
+ background-position:center;
+ cursor: pointer;
+ opacity: 0.3;
+}
+
+.imageSquare:hover, .imageRightangledtriangle:hover, .imageTriangle:hover, .imageCircle:hover {
+ opacity: 1;
+}
+
+.imageSquare {
+ left: 0%;
+ top: 0%;
+ background-image: url('square.jpg');
+ border: 1px dashed black;
+}
+
+.imageRightangledtriangle {
+ left: 50%;
+ top: 0%;
+ background-image: url('rightangledtriangle.jpg');
+ border: 1px dashed black;
+}
+
+.imageTriangle {
+ left: 0%;
+ top: 50%;
+ background-image: url('triangle.jpg');
+ border: 1px dashed black;
+}
+
+.imageCircle {
+ left: 50%;
+ top: 50%;
+ background-image: url('circle.jpg');
+ border: 1px dashed black;
+}
+
+.imageComplex {
+ left: 0%;
+ top: 0%;
+ width: 100%;
+ height: 100%;
+ background-repeat: no-repeat;
+ background-color: transparent;
+ background-image: url('figure.jpg');
+}
+
+.disabledImage {
+ pointer-events: none;
+}
+
+.tick {
+ position: absolute;
+ left: 6px;
+ top: 6px;
+ width: 41px;
+ height: 41px;
+}
+
+.functionForSquare, .functionForRightangledtriangle, .functionForTriangle, .functionForCircle {
+ font-size: 17px;
+ position: absolute;
+ left: 0%;
+ width: 100%;
+}
+
+.functionForSquare, .functionForRightangledtriangle, .functionForTriangle{
+ border-bottom: 1px dashed #CCC;
+}
+
+.textColor {
+ color: #727272;
+ margin-right: 5%;
+ opacity: 0.5;
+}
+
+
+.okButton {
+ font-size: 13px;
+ min-width: 150px;
+ float: left;
+ margin-top: 20px;
+ margin-bottom: 40px;
+ margin-left: 10%;
+ height: 30px;
+ width: 80%;
+}
+
+.radioButtonHolder {
+ width: 100%;
+ float: left;
+ text-align: left;
+}
+
+.radiobutton {
+ margin-left: 7%;
+ float: left;
+ cursor: pointer;
+}
+
+.radioText {
+ float: left;
+ text-align: left;
+}
+
+.resultDisplay {
+ position: absolute;
+ top: 9%;
+ left: 0%;
+ width: 100%;
+ height: 90%;
+ border-top: 1px solid #CCC;
+}
+
+.imageBlock {
+ position: absolute;
+ top: 5%;
+ left: 5%;
+ width: 90%;
+ height: 90%;
+}
+
+.stepExecutionDisplay {
+ padding-left: 2%;
+ position: absolute;
+ top: 9%;
+ left: 0%;
+ width: 98%;
+ height: 90%;
+ text-align: center;
+ border-top: 1px solid #CCC;
+}
+
+.hide {
+ display: none;
+}
+
+.show {
+ display: block;
+}
+
+#functionSquare, #functionRightangledtriangle, #functionCircle, #functionTriangle {
+ margin-left: 30%;
+ text-align: left;
+}
+
+.instruction {
+ float: left;
+ font-size: 1em;
+ margin-top: 15px;
+ text-align: left;
+ width: 90%;
+ margin-left: 5%;
+ color: #464646;
+}
+
+@media only screen and (min-width: 1000px) {
+
+.inputDivisionTitle, .outputDivisionTitle, .executionDivisionTitle {
+ font-size: 1.3em;
+}
+
+.initializeText, .executionText, .outputText {
+ padding-top: 1.8vmin;
+}
+
+.functionForSquare, .functionForRightangledtriangle, .functionForTriangle, .functionForCircle {
+ height: 24.9%;
+ overflow: auto;
+}
+
+.functionForSquare{
+ top: 0%;
+}
+
+.functionForRightangledtriangle {
+ top: 25%;
+}
+
+.functionForTriangle {
+ top: 50%;
+}
+
+.functionForCircle {
+ top: 75%;
+}
+
+.radioButtonHolder {
+ height: 24px;
+}
+
+.radiobutton {
+ width: 12%;
+ height: 60%;
+}
+
+.radioText {
+ font-size: 1em;
+ width: 68%;
+ height: 55%;
+}
+
+.questionText {
+ height: 5%;
+ min-height: 30px;
+ font-size: 1em;
+}
+
+.questionTextRich {
+ height: 9%;
+ min-height: 60px;
+ font-size: 1em;
+}
+
+}
+
+@media only screen and (max-width: 999px) and ( min-width: 600px) {
+
+.inputDivisionTitle, .outputDivisionTitle, .executionDivisionTitle {
+ font-size: 1.2em;
+}
+
+.stepExecutionDisplay {
+ line-height: 130%;
+ font-size: 1.2em;
+}
+
+.initializeText, .executionText, .outputText {
+ padding-top: 1.9vmin;
+}
+
+.functionForSquare, .functionForRightangledtriangle, .functionForTriangle, .functionForCircle {
+ height: 160px;
+}
+
+.functionForSquare{
+ top: 0px;
+}
+
+.functionForRightangledtriangle {
+ top: 164px;
+}
+
+.functionForTriangle {
+ top: 324px;
+}
+
+.functionForCircle {
+ top: 486px;
+}
+
+.radioButtonHolder {
+ height: 40px;
+}
+
+.radiobutton {
+ width: 25%;
+ height: 57%;
+}
+
+.radioText {
+ font-size: 1.2em;
+ width: 60%;
+ height: 60%;
+}
+
+.questionText {
+ height: 15%;
+ font-size: 1.2em;
+}
+
+.questionTextRich {
+ height: 20%;
+ font-size: 1.2em;
+}
+
+}
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..6a455e51
--- /dev/null
+++ b/index.html
@@ -0,0 +1,140 @@
+
+
+
1. Click on the square to define a function for calculating the area of a square.
+2. Similarly define functions for the other geometrical figures.
+3. The defined functions are shown in the middle window.
+4. Now make appropriate function calls in the main program to compute the area of the figure displayed.
+5. Press execute to execute the code and see the output.
+1. Given a well-behaved smooth function, integrate it over the given limits of integration ?
2. Approximating solution to integral a smooth function.
3. Integration Limits are from 0 to 30, b > a and b-a >= 1.
3. Integration Limits are from 1 to 10, b > a and b-a >= 1.