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 @@ + + + + + +Computer-Programming + + + + + +
+ +
+
Initialize
+
+
+

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. Enter number of arguments :
+
+
+
+ +
2. Enter datatype of arguments :
+
+
+ +
3. Enter return datatype of the function :
+
+
+ +
4. Choose formula for area of the square :
+
+
π*a*a
+
+ + +
+
+
1. Enter number of arguments :
+
+
+
+ +
2. Enter datatype of arguments :
+
+
+ +
3. Enter return datatype of the function :
+
+
+ +
4. Choose formula for area of the rectangle :
+
+
+
+ + +
+
+
1. Enter number of arguments :
+
+
+
+ +
2. Enter datatype of arguments :
+
+
+ +
3. Enter return datatype of the function :
+
+
+ +
4. Choose formula for area of the triangle :
+
+
+
+ + +
+
+
1. Enter number of arguments :
+
+
+
+ +
2. Enter datatype of arguments :
+
+
+ +
3. Enter return datatype of the function :
+
+
+ +
4. Choose formula for area of the circle :
+
+
+
+ + +
+
+
int main() {
 float totalArea;
+
totalArea =
+
+
  printf("Total Area : %f/n", totalArea);
  return 0;
}
+ + +
+
+
+
+
Step Execution
+
+
//function for square
+
//function for Rightangledtriangle
+
//function for triangle
+
//function for circle
+
+
+
+
Code Output
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/src/lab/exp1/simulation/index.html b/src/lab/exp1/simulation/index.html index d6ceab13..83b25cb1 100644 --- a/src/lab/exp1/simulation/index.html +++ b/src/lab/exp1/simulation/index.html @@ -24,7 +24,7 @@


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.


diff --git a/src/lab/exp1/simulation/numericalApproximation.js b/src/lab/exp1/simulation/numericalApproximation.js index 5ca76384..79e6eb8d 100644 --- a/src/lab/exp1/simulation/numericalApproximation.js +++ b/src/lab/exp1/simulation/numericalApproximation.js @@ -290,8 +290,8 @@ window.view = { alert('Enter numeric value of a and b'); return false; } - else if (valueA2 >= valueB2 || valueB2 > 30) { - alert('Integration Limits are from 0 to 30, b > a and b-a >= 1'); + else if (valueA2 >= valueB2 || valueB2 > 10) { + alert('Integration Limits are from 1 to 10, b > a and b-a >= 1'); return false; } else { diff --git a/src/lab/exp10/simulation/index.htm b/src/lab/exp10/simulation/index.htm index 3e03797c..70cce467 100644 --- a/src/lab/exp10/simulation/index.htm +++ b/src/lab/exp10/simulation/index.htm @@ -40,6 +40,7 @@ + @@ -77,4 +78,4 @@
- \ No newline at end of file + diff --git a/src/lab/exp2/simulation/function.js b/src/lab/exp2/simulation/function.js index 9d494050..1ef244d8 100644 --- a/src/lab/exp2/simulation/function.js +++ b/src/lab/exp2/simulation/function.js @@ -19,8 +19,8 @@ window.view = { this.addClickEvent('imageSquare', function() { view.showSquareInputs() }) this.addTouchEvent('imageSquare', function() { view.showSquareInputs() }) this.addClickEvent('okSquare', function() { view.validateSquareInputs() }) - this.addClickEvent('imageRectangle', function() { view.showRectangleInputs() }) - this.addClickEvent('okRectangle', function() { view.validateRectangleInputs() }) + 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() }) @@ -41,23 +41,23 @@ window.view = { document.getElementById(id2).style.opacity = '1' }, showSquareInputs: function() { - this.hideQuestionBlock('questionRectangle', 'imageRectangle') + this.hideQuestionBlock('questionRightangledtriangle', 'imageRightangledtriangle') this.hideQuestionBlock('questionCircle', 'imageCircle') this.hideQuestionBlock('questionTriangle', 'imageTriangle') this.showQuestionBlock('questionSquare', 'imageSquare') this.hideInstructions() this.unCheckRadioButtons() }, - showRectangleInputs: function() { + showRightangledtriangleInputs: function() { this.hideQuestionBlock('questionSquare', 'imageSquare') this.hideQuestionBlock('questionCircle', 'imageCircle') this.hideQuestionBlock('questionTriangle', 'imageTriangle') - this.showQuestionBlock('questionRectangle', 'imageRectangle') + this.showQuestionBlock('questionRightangledtriangle', 'imageRightangledtriangle') this.hideInstructions() this.unCheckRadioButtons() }, showTriangleInputs: function() { - this.hideQuestionBlock('questionRectangle', 'imageRectangle') + this.hideQuestionBlock('questionRightangledtriangle', 'imageRightangledtriangle') this.hideQuestionBlock('questionSquare', 'imageSquare') this.hideQuestionBlock('questionCircle', 'imageCircle') this.showQuestionBlock('questionTriangle', 'imageTriangle') @@ -66,19 +66,19 @@ window.view = { }, showCircleInputs: function() { this.hideQuestionBlock('questionSquare', 'imageSquare') - this.hideQuestionBlock('questionRectangle', 'imageRectangle') + this.hideQuestionBlock('questionRightangledtriangle', 'imageRightangledtriangle') this.hideQuestionBlock('questionTriangle', 'imageTriangle') this.showQuestionBlock('questionCircle', 'imageCircle') this.hideInstructions() this.unCheckRadioButtons() }, - approveRectangleInputs: function() { - this.displayFunctionForRectangle() + approveRightangledtriangleInputs: function() { + this.displayFunctionForRightangledtriangle() this.showInstructions() - document.getElementById('questionRectangle').className = 'questionBlock hide' - document.getElementById('imageRectangle').className += ' disabledImage' - document.getElementById('tickRectangle').className = 'tick' - document.getElementById('imageRectangle').style.opacity = '0.3' + 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() }, @@ -150,7 +150,7 @@ window.view = { else this.approveSquareInputs() }, - validateRectangleInputs: function() { + validateRightangledtriangleInputs: function() { var options1, options2, options3, options4 var a, b, c, d options1 = document.getElementsByName('radio_group5') @@ -178,15 +178,15 @@ window.view = { options4[i].checked = false } if ( a !== '2') - alert('Incorrect value of input variables(arguments). Calculating the area of a rectangle requires the length of the two different parallel sides of the rectangle. Try again.') + 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 rectangle need not be integers. Try again.') + 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 rectangle need not be an integer. Try again.') - else if ( d !== 'a*b' ) - alert('Incorrect formula for calculating the area of a rectangle. Try again.') + 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.approveRectangleInputs() + this.approveRightangledtriangleInputs() }, validateTriangleInputs: function() { var options1, options2, options3, options4 @@ -267,8 +267,8 @@ window.view = { displayFunctionForSquare: function() { document.getElementById('functionSquare').innerHTML += 'float area_sq (float a)
{
  float area = a*a;
  return area;
}' }, - displayFunctionForRectangle: function() { - document.getElementById('functionRectangle').innerHTML += 'float area_rect (float a,float b)
{
  float area = a*b;
  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;
}' @@ -318,8 +318,8 @@ window.view = { alert( 'area from function call ' + String( i + 1 ) + ' ) : ' + functionCall + ' is ' + this.area ) this.correctInputs ++ }, - area_rect: function( param, functionCall ) { - this.area = Number(param[0]) * Number(param[1]) + 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 ++ @@ -329,15 +329,15 @@ window.view = { document.getElementById('imageComplex').className = 'imageComplex hide' document.getElementById('calculateArea').className = 'questionBlock hide' document.getElementById('imageSquare').className = 'imageSquare' - document.getElementById('imageRectangle').className = 'imageRectangle' + document.getElementById('imageRightangledtriangle').className = 'imageRightangledtriangle' document.getElementById('imageTriangle').className = 'imageTriangle' document.getElementById('imageCircle').className = 'imageCircle' document.getElementById('tickSquare').className = 'tick hide' - document.getElementById('tickRectangle').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('functionRectangle').innerHTML = '' + document.getElementById('functionRightangledtriangle').innerHTML = '' document.getElementById('functionCircle').innerHTML = '' document.getElementById('functionTriangle').innerHTML = '' document.getElementById('instructions').className = 'questionBlock' @@ -366,8 +366,8 @@ window.view = { else alert( 'Incorrect function call at line ' + String( i + 1 ) ) } - else if ( parameter.length === 2 && functionCall === 'area_rect()' && isNaN(parameter[0]) === false && isNaN(parameter[1]) === false ) - this.area_rect(parameter, parsedValue) + 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 ) ) } @@ -383,4 +383,4 @@ window.view = { } } -window.onload = function() { view.init() } \ No newline at end of file +window.onload = function() { view.init() } diff --git a/src/lab/exp2/simulation/functions.css b/src/lab/exp2/simulation/functions.css index bf67c6ca..a6d069ca 100644 --- a/src/lab/exp2/simulation/functions.css +++ b/src/lab/exp2/simulation/functions.css @@ -226,7 +226,7 @@ body { border-radius: 3px; } -.imageSquare, .imageRectangle, .imageTriangle, .imageCircle { +.imageSquare, .imageRightangledtriangle, .imageTriangle, .imageCircle { position: absolute; height: 49%; width: 49%; @@ -237,7 +237,7 @@ body { opacity: 0.3; } -.imageSquare:hover, .imageRectangle:hover, .imageTriangle:hover, .imageCircle:hover { +.imageSquare:hover, .imageRightangledtriangle:hover, .imageTriangle:hover, .imageCircle:hover { opacity: 1; } @@ -248,10 +248,10 @@ body { border: 1px dashed black; } -.imageRectangle { +.imageRightangledtriangle { left: 50%; top: 0%; - background-image: url('rectangle.jpg'); + background-image: url('rightangledtriangle.jpg'); border: 1px dashed black; } @@ -291,14 +291,14 @@ body { height: 41px; } -.functionForSquare, .functionForRectangle, .functionForTriangle, .functionForCircle { +.functionForSquare, .functionForRightangledtriangle, .functionForTriangle, .functionForCircle { font-size: 17px; position: absolute; left: 0%; width: 100%; } -.functionForSquare, .functionForRectangle, .functionForTriangle{ +.functionForSquare, .functionForRightangledtriangle, .functionForTriangle{ border-bottom: 1px dashed #CCC; } @@ -373,7 +373,7 @@ body { display: block; } -#functionSquare, #functionRectangle, #functionCircle, #functionTriangle { +#functionSquare, #functionRightangledtriangle, #functionCircle, #functionTriangle { margin-left: 30%; text-align: left; } @@ -398,7 +398,7 @@ body { padding-top: 1.8vmin; } -.functionForSquare, .functionForRectangle, .functionForTriangle, .functionForCircle { +.functionForSquare, .functionForRightangledtriangle, .functionForTriangle, .functionForCircle { height: 24.9%; overflow: auto; } @@ -407,7 +407,7 @@ body { top: 0%; } -.functionForRectangle { +.functionForRightangledtriangle { top: 25%; } @@ -463,7 +463,7 @@ body { padding-top: 1.9vmin; } -.functionForSquare, .functionForRectangle, .functionForTriangle, .functionForCircle { +.functionForSquare, .functionForRightangledtriangle, .functionForTriangle, .functionForCircle { height: 160px; } @@ -471,7 +471,7 @@ body { top: 0px; } -.functionForRectangle { +.functionForRightangledtriangle { top: 164px; } @@ -508,4 +508,4 @@ body { font-size: 1.2em; } -} \ No newline at end of file +} diff --git a/src/lab/exp2/simulation/index.html b/src/lab/exp2/simulation/index.html index 5732a2ea..6a455e51 100644 --- a/src/lab/exp2/simulation/index.html +++ b/src/lab/exp2/simulation/index.html @@ -42,7 +42,7 @@ -
+
1. Enter number of arguments :
@@ -58,11 +58,11 @@
4. Choose formula for area of the rectangle :
-
+
- -
+ +
1. Enter number of arguments :
@@ -119,7 +119,7 @@
Step Execution
//function for square
-
//function for rectangle
+
//function for Rightangledtriangle
//function for triangle
//function for circle
@@ -129,7 +129,7 @@
-
+
diff --git a/src/lab/exp3/simulation/advControlFlow.js b/src/lab/exp3/simulation/advControlFlow.js index 9f83de25..fcf682d8 100644 --- a/src/lab/exp3/simulation/advControlFlow.js +++ b/src/lab/exp3/simulation/advControlFlow.js @@ -177,7 +177,10 @@ window.view = { } if (selected_loop === 'do-while' && inputValue !== '' && !isNaN(model.inp)) { - this.displayLoop('dowhileLoopContent', 'codeContentDoWhile1') + if (inputValue < -1 || inputValue > 21){ alert("Invalid input" ); + return false; + } + this.displayLoop('dowhileLoopContent', 'codeContentDoWhile1') } this.disableButton('btnStart') this.changeClass( 'btnStart', 'buttonDisable startButton') @@ -188,7 +191,7 @@ window.view = { this.disableButton('simpleLoopInput') }, updateModelAndShowResult: function() { - if( model.inp >= 1) + if( model.inp >= 0) { this.disp = model.fact model.computeNextFact() @@ -377,4 +380,4 @@ window.view = { this.activateEvents() } } -window.onload = function() { view.init() } \ No newline at end of file +window.onload = function() { view.init() } diff --git a/src/lab/exp4/simulation/1-D/array.js b/src/lab/exp4/simulation/1-D/array.js index a00b245d..9d1f5b34 100644 --- a/src/lab/exp4/simulation/1-D/array.js +++ b/src/lab/exp4/simulation/1-D/array.js @@ -51,6 +51,14 @@ window.view = { this.addClickEvent('btnOk', function() { view.proceedToStartButton() }) this.addClickEvent('btnStart', function() { view.displayElements() }) this.addClickEvent('btnNext', function() { view.sortArray() }) + this.addClickEvent('btnRandom', function() { view.removetextbox() }) + this.addClickEvent('btnManual', function() { view.addtextbox() }) +}, + removetextbox: function(){ + document.getElementById("userInput").disabled = true; +}, + addtextbox: function(){ + document.getElementById("userInput").disabled = false; }, proceedToStartButton: function() { var userInput = this.getArraySize() @@ -269,4 +277,4 @@ window.view = { this.activateEvents() } } -window.onload = function() { view.init() } \ No newline at end of file +window.onload = function() { view.init() } diff --git a/src/lab/exp4/simulation/2-D/array.js b/src/lab/exp4/simulation/2-D/array.js index 5f5a1fdd..4d1797ee 100644 --- a/src/lab/exp4/simulation/2-D/array.js +++ b/src/lab/exp4/simulation/2-D/array.js @@ -119,10 +119,12 @@ window.view = { }, generateFirstMatrixElements: function() { var size = this.rowsA * this.colsA + var j=1; for ( i = 0 ; i < size ; i++) { - var random = Math.floor(Math.random()*15) + var random = j; this.matrixA.push(random) + j=j+1; } this.resetRowsAndCols() this.disableButton('row') @@ -135,10 +137,12 @@ window.view = { }, generateSecondMatrixElements: function() { var size = this.rowsB * this.colsB + var z=1;; for ( i = 0 ; i < size ; i++) { - var random = Math.floor(Math.random()*15) + var random = z; this.matrixB.push(random) + z=z+1; } this.disableButton('generateB') this.changeClass( 'generateB', 'buttonDisable GenerateValueButton show' ) @@ -417,4 +421,4 @@ window.view = { this.activateEvents() } } -window.onload = function() { view.init() } \ No newline at end of file +window.onload = function() { view.init() } diff --git a/src/lab/exp6/simulation/IfElse/index.html b/src/lab/exp6/simulation/IfElse/index.html index 46080f90..883f3e77 100644 --- a/src/lab/exp6/simulation/IfElse/index.html +++ b/src/lab/exp6/simulation/IfElse/index.html @@ -14,10 +14,10 @@
Initialize
-
x1 = 075;   y1 = 075;
-
x2 = 275;   y2 = 075;
-
x3 = 275;   y3 = 325;
-
x4 = 075;   y4 = 325;
+
x1 =050;   y1 = 050;
+
x2 = 250;   y2 = 050;
+
x3 = 250;   y3 = 300;
+
x4 = 050;   y4 = 300;
@@ -125,4 +125,4 @@
- \ No newline at end of file + diff --git a/src/lab/exp6/simulation/SwitchCase/basicControlFlow.js b/src/lab/exp6/simulation/SwitchCase/basicControlFlow.js index 6822a81c..7f63096e 100644 --- a/src/lab/exp6/simulation/SwitchCase/basicControlFlow.js +++ b/src/lab/exp6/simulation/SwitchCase/basicControlFlow.js @@ -230,7 +230,7 @@ window.view = { this.setInnerHtml('outputDayId', 'WORKING DAY'); } } - if ( model.inputNumber > 7 ) { + if ( model.inputNumber > 7 || model.inputNumber < 1) { if (this.nextSiblingElement.id === 'holidayId') this.codeExecutionWithColourAndId('elseIfId'); else if (this.nextSiblingElement.id === 'workingdayId') diff --git a/src/lab/exp6/simulation/SwitchCase/index.html b/src/lab/exp6/simulation/SwitchCase/index.html index 4af5361f..a727dfb6 100644 --- a/src/lab/exp6/simulation/SwitchCase/index.html +++ b/src/lab/exp6/simulation/SwitchCase/index.html @@ -47,7 +47,7 @@
   break;
  case 5 : str = 'Friday';
   break;
-
  case 6 : str = 'Saturday';
+
  case 6 : str = 'Sunday';
   break;
  case 7 : str = 'Sunday';
   break;
@@ -88,4 +88,4 @@
- \ No newline at end of file + diff --git a/src/lab/exp9/simulation/JS/recursion.js b/src/lab/exp9/simulation/JS/recursion.js index 1417a55b..8253a839 100644 --- a/src/lab/exp9/simulation/JS/recursion.js +++ b/src/lab/exp9/simulation/JS/recursion.js @@ -23,8 +23,8 @@ window.view = { alert('Enter number of disks first !') else if ( isNaN(input) === true ) alert('Number of disks must be an integer value !') - else if ( input > 5 || input % 1 !== 0 ) - alert('Only integral value (Greater than equal to 1 and less than equal to 5) is accepted !') + else if ( input > 10 || input % 1 !== 0 ) + alert('Only integral value (Greater than equal to 0 and less than equal to 10) is accepted !') else { this.disableElement('btnOk') this.enableElement('btnStart') @@ -290,4 +290,4 @@ window.view = { this.activateEvents() } } -window.onload = function() { view.init() } \ No newline at end of file +window.onload = function() { view.init() }