From 7f01db27d091918c394bfdf4fc3021a2651810d2 Mon Sep 17 00:00:00 2001 From: SHAIK SAJEETH Date: Mon, 29 Jun 2020 20:41:50 +0530 Subject: [PATCH 01/11] added (a*b)+(b*c) --- src/lab/exp10/simulation/index.htm | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lab/exp10/simulation/index.htm b/src/lab/exp10/simulation/index.htm index 3e03797c..38b67846 100644 --- a/src/lab/exp10/simulation/index.htm +++ b/src/lab/exp10/simulation/index.htm @@ -43,6 +43,7 @@ + +
@@ -71,4 +72,4 @@ - \ No newline at end of file + From 56a09d80d368b97f12d1256adc5f811cb88823a0 Mon Sep 17 00:00:00 2001 From: SHAIK SAJEETH Date: Wed, 1 Jul 2020 11:45:03 +0530 Subject: [PATCH 06/11] updated array elements --- src/lab/exp4/simulation/2-D/array.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lab/exp4/simulation/2-D/array.js b/src/lab/exp4/simulation/2-D/array.js index 5f5a1fdd..37e3400d 100644 --- a/src/lab/exp4/simulation/2-D/array.js +++ b/src/lab/exp4/simulation/2-D/array.js @@ -121,7 +121,7 @@ window.view = { var size = this.rowsA * this.colsA for ( i = 0 ; i < size ; i++) { - var random = Math.floor(Math.random()*15) + var random = Math.floor(Math.random() * (size - this.colsA)) + this.colsA; this.matrixA.push(random) } this.resetRowsAndCols() @@ -137,7 +137,7 @@ window.view = { var size = this.rowsB * this.colsB for ( i = 0 ; i < size ; i++) { - var random = Math.floor(Math.random()*15) + var random = Math.floor(Math.random() * (size - this.colsA)) + this.colsA; this.matrixB.push(random) } this.disableButton('generateB') @@ -417,4 +417,4 @@ window.view = { this.activateEvents() } } -window.onload = function() { view.init() } \ No newline at end of file +window.onload = function() { view.init() } From bfb9e95711d44b012fd4110efa9ce635389eee6d Mon Sep 17 00:00:00 2001 From: SHAIK SAJEETH Date: Wed, 1 Jul 2020 12:36:16 +0530 Subject: [PATCH 07/11] updated with right angle triangle --- src/lab/exp2/simulation/function.js | 844 ++++++++++++---------- src/lab/exp2/simulation/functions.css | 723 +++++++++--------- src/lab/exp2/simulation/index.html | 4 +- src/lab/exp2/simulation/righttriangle.jpg | Bin 0 -> 5959 bytes 4 files changed, 852 insertions(+), 719 deletions(-) create mode 100644 src/lab/exp2/simulation/righttriangle.jpg diff --git a/src/lab/exp2/simulation/function.js b/src/lab/exp2/simulation/function.js index 9d494050..2d86230e 100644 --- a/src/lab/exp2/simulation/function.js +++ b/src/lab/exp2/simulation/function.js @@ -1,386 +1,462 @@ 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('imageRectangle', function() { view.showRectangleInputs() }) - this.addClickEvent('okRectangle', function() { view.validateRectangleInputs() }) - 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('questionRectangle', 'imageRectangle') - this.hideQuestionBlock('questionCircle', 'imageCircle') - this.hideQuestionBlock('questionTriangle', 'imageTriangle') - this.showQuestionBlock('questionSquare', 'imageSquare') - this.hideInstructions() - this.unCheckRadioButtons() - }, - showRectangleInputs: function() { - this.hideQuestionBlock('questionSquare', 'imageSquare') - this.hideQuestionBlock('questionCircle', 'imageCircle') - this.hideQuestionBlock('questionTriangle', 'imageTriangle') - this.showQuestionBlock('questionRectangle', 'imageRectangle') - this.hideInstructions() - this.unCheckRadioButtons() - }, - showTriangleInputs: function() { - this.hideQuestionBlock('questionRectangle', 'imageRectangle') - this.hideQuestionBlock('questionSquare', 'imageSquare') - this.hideQuestionBlock('questionCircle', 'imageCircle') - this.showQuestionBlock('questionTriangle', 'imageTriangle') - this.hideInstructions() - this.unCheckRadioButtons() - }, - showCircleInputs: function() { - this.hideQuestionBlock('questionSquare', 'imageSquare') - this.hideQuestionBlock('questionRectangle', 'imageRectangle') - this.hideQuestionBlock('questionTriangle', 'imageTriangle') - this.showQuestionBlock('questionCircle', 'imageCircle') - this.hideInstructions() - this.unCheckRadioButtons() - }, - approveRectangleInputs: function() { - this.displayFunctionForRectangle() - 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' - 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() - }, - validateRectangleInputs: 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 rectangle requires the length of the two different parallel sides of the rectangle. 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.') - 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.') - else - this.approveRectangleInputs() - }, - 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;
}' - }, - displayFunctionForRectangle: function() { - document.getElementById('functionRectangle').innerHTML += 'float area_rect (float a,float b)
{
  float area = 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_rect: function( param, functionCall ) { - this.area = 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('imageRectangle').className = 'imageRectangle' - document.getElementById('imageTriangle').className = 'imageTriangle' - document.getElementById('imageCircle').className = 'imageCircle' - document.getElementById('tickSquare').className = 'tick hide' - document.getElementById('tickRectangle').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('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_rect()' && isNaN(parameter[0]) === false && isNaN(parameter[1]) === false ) - this.area_rect(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() - } -} + 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("imageRectangle", function () { + view.showRectangleInputs(); + }); + this.addClickEvent("okRectangle", function () { + view.validateRectangleInputs(); + }); + 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("questionRectangle", "imageRectangle"); + this.hideQuestionBlock("questionCircle", "imageCircle"); + this.hideQuestionBlock("questionTriangle", "imageTriangle"); + this.showQuestionBlock("questionSquare", "imageSquare"); + this.hideInstructions(); + this.unCheckRadioButtons(); + }, + showRectangleInputs: function () { + this.hideQuestionBlock("questionSquare", "imageSquare"); + this.hideQuestionBlock("questionCircle", "imageCircle"); + this.hideQuestionBlock("questionTriangle", "imageTriangle"); + this.showQuestionBlock("questionRectangle", "imageRectangle"); + this.hideInstructions(); + this.unCheckRadioButtons(); + }, + showTriangleInputs: function () { + this.hideQuestionBlock("questionRectangle", "imageRectangle"); + this.hideQuestionBlock("questionSquare", "imageSquare"); + this.hideQuestionBlock("questionCircle", "imageCircle"); + this.showQuestionBlock("questionTriangle", "imageTriangle"); + this.hideInstructions(); + this.unCheckRadioButtons(); + }, + showCircleInputs: function () { + this.hideQuestionBlock("questionSquare", "imageSquare"); + this.hideQuestionBlock("questionRectangle", "imageRectangle"); + this.hideQuestionBlock("questionTriangle", "imageTriangle"); + this.showQuestionBlock("questionCircle", "imageCircle"); + this.hideInstructions(); + this.unCheckRadioButtons(); + }, + approveRectangleInputs: function () { + this.displayFunctionForRectangle(); + 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"; + 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(); + }, + validateRectangleInputs: 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 right angle requires base and height of triangle. 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." + ); + 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." + ); + else this.approveRectangleInputs(); + }, + 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;
}"; + }, + displayFunctionForRectangle: function () { + document.getElementById("functionRectangle").innerHTML += + "float area_righttriangle (float a,float b)
{
  float area = (1/2)*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_rect: function (param, functionCall) { + this.area = 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("imageRectangle").className = "imageRectangle"; + document.getElementById("imageTriangle").className = "imageTriangle"; + document.getElementById("imageCircle").className = "imageCircle"; + document.getElementById("tickSquare").className = "tick hide"; + document.getElementById("tickRectangle").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("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_rect()" && + isNaN(parameter[0]) === false && + isNaN(parameter[1]) === false + ) + this.area_rect(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() } \ 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..a995857f 100644 --- a/src/lab/exp2/simulation/functions.css +++ b/src/lab/exp2/simulation/functions.css @@ -1,511 +1,568 @@ -*{padding: 0 ; margin: 0 ;} +* { + 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%; + 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); -} - + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 6%; + font-size: 4vh; + padding-top: 1.3vmin; +} + +.button, .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); + 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::-moz-focus-inner, .button::-moz-focus-inner { - padding: 0; - border: 0; +.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; + 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; + left: 25%; + width: 30%; + overflow-x: auto; } .inputDivision { - left: 3%; - width: 19%; + 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; + 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'); + margin-top: 1.5vh; + width: 20%; + background-image: url("initIcon.png"); } .initializeText { - width: 60%; - float: left; - height: 100%; + width: 60%; + float: left; + height: 100%; } .executionPic { - margin-top: 1vh; - width: 25%; - background-image: url('pageIcon.png'); + margin-top: 1vh; + width: 25%; + background-image: url("pageIcon.png"); } .executionText { - text-align: left; - width: 50%; - float: left; - height: 100%; + text-align: left; + width: 50%; + float: left; + height: 100%; } .outputPic { - margin-top: 1.6vh; - width: 25%; - background-image: url('outputIcon.png'); + margin-top: 1.6vh; + width: 25%; + background-image: url("outputIcon.png"); } .outputText { - text-align: left; - width: 50%; - float: left; - height: 100%; + 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; + 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; + 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; +.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, +.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%; + height: 8%; } .computeArea { - height: 4%; + height: 4%; } .programTail { - height: 15%; + 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, .imageRectangle, .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, .imageRectangle:hover, .imageTriangle:hover, .imageCircle:hover { - opacity: 1; + 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, +.imageRectangle, +.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, +.imageRectangle:hover, +.imageTriangle:hover, +.imageCircle:hover { + opacity: 1; } .imageSquare { - left: 0%; - top: 0%; - background-image: url('square.jpg'); - border: 1px dashed black; + left: 0%; + top: 0%; + background-image: url("square.jpg"); + border: 1px dashed black; } .imageRectangle { - left: 50%; - top: 0%; - background-image: url('rectangle.jpg'); - border: 1px dashed black; + left: 50%; + top: 0%; + background-image: url("rectangle.jpg"); + border: 1px dashed black; } .imageTriangle { - left: 0%; - top: 50%; - background-image: url('triangle.jpg'); - border: 1px dashed black; + 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; + 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'); + left: 0%; + top: 0%; + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-color: transparent; + background-image: url("figure.jpg"); } .disabledImage { - pointer-events: none; + pointer-events: none; } .tick { - position: absolute; - left: 6px; - top: 6px; - width: 41px; - height: 41px; + position: absolute; + left: 6px; + top: 6px; + width: 41px; + height: 41px; } -.functionForSquare, .functionForRectangle, .functionForTriangle, .functionForCircle { - font-size: 17px; - position: absolute; - left: 0%; - width: 100%; +.functionForSquare, +.functionForRectangle, +.functionForTriangle, +.functionForCircle { + font-size: 17px; + position: absolute; + left: 0%; + width: 100%; } -.functionForSquare, .functionForRectangle, .functionForTriangle{ - border-bottom: 1px dashed #CCC; +.functionForSquare, +.functionForRectangle, +.functionForTriangle { + border-bottom: 1px dashed #ccc; } .textColor { - color: #727272; - margin-right: 5%; - opacity: 0.5; + 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%; + 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; +.radioButtonHolder { + width: 100%; + float: left; + text-align: left; } .radiobutton { - margin-left: 7%; - float: left; - cursor: pointer; + margin-left: 7%; + float: left; + cursor: pointer; } .radioText { - float: left; - text-align: left; + float: left; + text-align: left; } .resultDisplay { - position: absolute; - top: 9%; - left: 0%; - width: 100%; - height: 90%; - border-top: 1px solid #CCC; + 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%; + 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; + padding-left: 2%; + position: absolute; + top: 9%; + left: 0%; + width: 98%; + height: 90%; + text-align: center; + border-top: 1px solid #ccc; } .hide { - display: none; + display: none; } .show { - display: block; + display: block; } -#functionSquare, #functionRectangle, #functionCircle, #functionTriangle { - margin-left: 30%; - text-align: left; +#functionSquare, +#functionRectangle, +#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; + 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 { + .inputDivisionTitle, + .outputDivisionTitle, + .executionDivisionTitle { font-size: 1.3em; -} - -.initializeText, .executionText, .outputText { - padding-top: 1.8vmin; -} - -.functionForSquare, .functionForRectangle, .functionForTriangle, .functionForCircle { + } + + .initializeText, + .executionText, + .outputText { + padding-top: 1.8vmin; + } + + .functionForSquare, + .functionForRectangle, + .functionForTriangle, + .functionForCircle { height: 24.9%; overflow: auto; -} + } -.functionForSquare{ + .functionForSquare { top: 0%; -} + } -.functionForRectangle { + .functionForRectangle { top: 25%; -} + } -.functionForTriangle { + .functionForTriangle { top: 50%; -} + } -.functionForCircle { + .functionForCircle { top: 75%; -} + } -.radioButtonHolder { + .radioButtonHolder { height: 24px; -} + } -.radiobutton { + .radiobutton { width: 12%; height: 60%; -} + } -.radioText { + .radioText { font-size: 1em; width: 68%; height: 55%; -} + } -.questionText { + .questionText { height: 5%; - min-height: 30px; + min-height: 30px; font-size: 1em; -} + } -.questionTextRich { + .questionTextRich { height: 9%; min-height: 60px; font-size: 1em; + } } -} - -@media only screen and (max-width: 999px) and ( min-width: 600px) { - -.inputDivisionTitle, .outputDivisionTitle, .executionDivisionTitle { +@media only screen and (max-width: 999px) and (min-width: 600px) { + .inputDivisionTitle, + .outputDivisionTitle, + .executionDivisionTitle { font-size: 1.2em; -} + } -.stepExecutionDisplay { + .stepExecutionDisplay { line-height: 130%; font-size: 1.2em; -} - -.initializeText, .executionText, .outputText { - padding-top: 1.9vmin; -} - -.functionForSquare, .functionForRectangle, .functionForTriangle, .functionForCircle { + } + + .initializeText, + .executionText, + .outputText { + padding-top: 1.9vmin; + } + + .functionForSquare, + .functionForRectangle, + .functionForTriangle, + .functionForCircle { height: 160px; -} + } -.functionForSquare{ + .functionForSquare { top: 0px; -} + } -.functionForRectangle { + .functionForRectangle { top: 164px; -} + } -.functionForTriangle { + .functionForTriangle { top: 324px; -} + } -.functionForCircle { + .functionForCircle { top: 486px; -} + } -.radioButtonHolder { + .radioButtonHolder { height: 40px; -} + } -.radiobutton { + .radiobutton { width: 25%; height: 57%; -} + } -.radioText { + .radioText { font-size: 1.2em; width: 60%; - height: 60%; -} + height: 60%; + } -.questionText { - height: 15%; + .questionText { + height: 15%; font-size: 1.2em; -} + } -.questionTextRich { + .questionTextRich { height: 20%; 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..c4f73581 100644 --- a/src/lab/exp2/simulation/index.html +++ b/src/lab/exp2/simulation/index.html @@ -56,7 +56,7 @@
-
4. Choose formula for area of the rectangle :
+
4. Choose formula for area of the Right Angle riangle:
@@ -119,7 +119,7 @@
Step Execution
//function for square
-
//function for rectangle
+
//function for right angle triangle
//function for triangle
//function for circle
diff --git a/src/lab/exp2/simulation/righttriangle.jpg b/src/lab/exp2/simulation/righttriangle.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ee6063dd13c7af2e1a66ae18c9e49aec4498ddb7 GIT binary patch literal 5959 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 Date: Thu, 2 Jul 2020 16:25:25 +0530 Subject: [PATCH 08/11] updated array elements generation --- src/lab/exp4/simulation/2-D/array.js | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/lab/exp4/simulation/2-D/array.js b/src/lab/exp4/simulation/2-D/array.js index 37e3400d..63207469 100644 --- a/src/lab/exp4/simulation/2-D/array.js +++ b/src/lab/exp4/simulation/2-D/array.js @@ -118,11 +118,13 @@ window.view = { document.getElementById('col').value = '' }, generateFirstMatrixElements: function() { - var size = this.rowsA * this.colsA - for ( i = 0 ; i < size ; i++) - { - var random = Math.floor(Math.random() * (size - this.colsA)) + this.colsA; - this.matrixA.push(random) + var size = this.rowsA * this.colsA; + var j = 1; + for (i = 0; i < size; i++) { + var random = j; + + this.matrixA.push(random); + j = j + 1; } this.resetRowsAndCols() this.disableButton('row') @@ -134,11 +136,13 @@ window.view = { this.matrixCount ++ }, generateSecondMatrixElements: function() { - var size = this.rowsB * this.colsB - for ( i = 0 ; i < size ; i++) - { - var random = Math.floor(Math.random() * (size - this.colsA)) + this.colsA; - this.matrixB.push(random) + var size = this.rowsB * this.colsB; + var j = 1; + for (i = 0; i < size; i++) { + var random = j; + + this.matrixB.push(random); + j = j + 1; } this.disableButton('generateB') this.changeClass( 'generateB', 'buttonDisable GenerateValueButton show' ) From 4ce93502db63d4b5b37aa2bf389874328a4df29e Mon Sep 17 00:00:00 2001 From: SHAIK SAJEETH Date: Tue, 7 Jul 2020 08:06:12 +0530 Subject: [PATCH 09/11] updated ranges to values A and B. --- .../exp1/simulation/numericalApproximation.js | 773 +++++++++--------- 1 file changed, 391 insertions(+), 382 deletions(-) diff --git a/src/lab/exp1/simulation/numericalApproximation.js b/src/lab/exp1/simulation/numericalApproximation.js index 5ca76384..5be6c291 100644 --- a/src/lab/exp1/simulation/numericalApproximation.js +++ b/src/lab/exp1/simulation/numericalApproximation.js @@ -4,391 +4,400 @@ //---------------------------------+ window.model = { - inputValueA -: '', // user input a. - inputValueB: '', // usre input b. - sum: 0, //total sum that compute by computeSum method. - width: 1, //width of executing one step. - // computeSum: compute total sum of area under cos curve. - computeSum: function () { - this.sum = this.sum + Math.cos(2 * Math.PI/13 * this.inputValueA) * this.width; - }, - /* incrementInWidth: compute increment in inputValueA, that represent + inputValueA: "", // user input a. + inputValueB: "", // usre input b. + sum: 0, //total sum that compute by computeSum method. + width: 1, //width of executing one step. + // computeSum: compute total sum of area under cos curve. + computeSum: function () { + this.sum = + this.sum + Math.cos(((2 * Math.PI) / 13) * this.inputValueA) * this.width; + }, + /* incrementInWidth: compute increment in inputValueA, that represent total width of curve from starting point to current point */ - incrementInWidth: function () { - this.inputValueA = this.inputValueA + this.width; - } -} + incrementInWidth: function () { + this.inputValueA = this.inputValueA + this.width; + }, +}; window.view = { - wavelengthController: .0472, //control wavelength of cos curve. - xCoordinatesValue: 0, // value of x coordinate. - yCoordinatesValue: 0, // value of y coordinate. - sum: 0, // round up the sum(model.sum) value to 2 decimal points. - canvasContext: '', // canvasContext have many properties and methods for drawing paths, boxes, circles, text, images, and more. - canvas: new Object(), // Object value of canvas. - currentSiblingElement: new Object(), // Object value of current sibling. - nextSiblingElement: new Object(), // Object value of next sibling. - // addClickEvent: add EventListener to other methods. - addClickEvent: function (id, method) { - var element = document.getElementById(id); - element.addEventListener('click', method, false); - }, - // activateEvents: calls addClickEvent method to add EventListener to other methods. - activateEvents: function () { - this.addClickEvent('okBtnId', function() { view.validationInput() }); - this.addClickEvent('startBtnId', function() { view.startExperiment() }); - this.addClickEvent('nextBtnId', function() { view.plotCurveArea() }); - this.addClickEvent('stopBtnId', function() { view.stopExperiment() }); - }, - // disableElement: makes element disable. - disableElement: function(Id) { - document.getElementById(Id).disabled = true; - }, - // enableElement: makes element enable. - enableElement: function(Id) { - document.getElementById(Id).disabled = false; - }, - // replaceElement: replace one element by another element. - replaceElement: function (id1, id2) { - document.getElementById(id1).style.display = 'none'; - document.getElementById(id2).style.display = 'block'; - }, - // changeClass: changes class name of a element. - changeClass: function(id, className) { - document.getElementById(id).className = className - }, - // applyColorClass: adds new color class to a element. - applyColorClass: function (id, colorClass) { - document.getElementById(id).classList.add(colorClass); - }, - // removeColorClass: removes color class from element. - removeColorClass: function (id, colorClass) { - document.getElementById(id).classList.remove(colorClass); - }, - // executionWithColour: shows execution of code by changing color in code Content. - executionWithColour: function () { - this.removeColorClass(this.currentSiblingElement.id, 'redClass'); - this.applyColorClass(this.nextSiblingElement.id, 'redClass'); - }, - // getValue: return value from element. - getValue: function (id) { - var value = document.getElementById(id).value; - return value; - }, - // setValue: set given value to a element. - setValue: function (id, valueToSet) { - document.getElementById(id).value = valueToSet; - }, - // getElementByClass: return element by given class name. - getElementByClass: function (className) { - var element = document.getElementsByClassName(className); - return element[0]; - }, - // getNextSiblingElement: return next sibling element. - getNextSiblingElement: function (element) { - var nextSiblingElement = element.nextSibling; - nextSiblingElement = nextSiblingElement.nextSibling; - return nextSiblingElement; - }, - // setInnerHtml: set innerText to a element. - setInnerHtml: function (id, innerHTML) { - document.getElementById(id).innerHTML = innerHTML; - }, - // resetVariables: reset all variables to it's initial state. - resetVariables: function () { - model.inputValueA = ''; - model.inputValueB = ''; - this.xCoordinatesValue = 0; - this.yCoordinatesValue = 0; - model.sum = 0; - this.sum = 0; - }, - // resetTextFieldValue: reset text field to their initial state. - resetTextFieldValue: function () { - this.setValue('valueA', ''); - this.setValue('valueB', ''); - }, - // resetButtonAndTextField: reset button it's initial state and do text field enable. - resetButtonAndTextField: function () { - this.replaceElement('stopBtnId', 'startBtnId'); - this.enableElement('valueA'); - this.enableElement('valueB'); - this.enableElement('okBtnId'); - this.disableElement('nextBtnId'); - this.disableElement('stopBtnId'); - this.changeClass('okBtnId', 'button startButton'); - this.changeClass('startBtnId', 'buttonDisable myStartButton'); - this.changeClass('stopBtnId', 'buttonDisable startButton'); - this.changeClass('nextBtnId', 'buttonDisable nextButton'); - }, - // endOfExecution: work at end of code execution and with stop button to reset whole experiment at it's initial state. - endOfExecution: function () { - // this.clearOutputValues(); - this.resetVariables(); - this.resetTextFieldValue(); - this.resetButtonAndTextField(); - var idOfRedText = this.getElementByClass('redClass').id; - this.removeColorClass(idOfRedText, 'redClass'); - }, - // clearOutputValues: clear all output values that displayed during the execution. - clearOutputValues: function () { - this.setInnerHtml('vari', ''); - this.setInnerHtml('valuei', ''); - this.setInnerHtml('valuesum', ''); - this.setInnerHtml('varsum', ''); - this.setInnerHtml('integrText', ''); - this.setInnerHtml('integrValue', ''); - }, - // getCanvas: get canvas and canvasContext as a Object. - getCanvas: function () { - this.canvas = document.getElementById('myCanvas'); - this.canvasContext = this.canvas.getContext('2d'); - }, - // drawAxis: draw x-axis and y-axis on canvas. - drawAxis: function () { - this.getCanvas(); - this.canvasContext.beginPath(); - this.canvasContext.moveTo(20, 0); // 20 is x-coordinate value and 0 is y-coordinate value. - this.canvasContext.lineTo(20, 300); // 20 is x-coordinate value and 360 is y-coordinate value. - this.canvasContext.moveTo(20, 150); // 20 is x-coordinate value and 180 is y-coordinate value. - this.canvasContext.lineTo(420, 150); // 520 is x-coordinate value and 180 is y-coordinate value. - this.canvasContext.strokeStyle = '#3072b3'; - this.canvasContext.lineWidth = 2; - this.canvasContext.stroke(); - }, - // drawText: labels x-axis and y-axis with text on canvas. - drawText: function () { - this.canvasContext.font = '18px Arial'; - this.canvasContext.beginPath(); - this.canvasContext.fillText('0', 8, 150); // 0 is text that to be display, 8 is x-coordinate value and 180 is y-coordinate value. - this.canvasContext.fillText('1', 8, 85); // 1 is text that to be display, 8 is x-coordinate value and 100 is y-coordinate value. - this.canvasContext.fillText('2', 8, 15); // 2 is text that to be display, 8 is x-coordinate value and 20 is y-coordinate value. - this.canvasContext.fillText('1', 8, 220); // 1 is text that to be display, 8 is x-coordinate value and 260 is y-coordinate value. - this.canvasContext.fillText('2', 8, 290); // 2 is text that to be display, 8 is x-coordinate value and 340 is y-coordinate value. - var value = 5; // 5 is value to display and position is x-coordinate value where value to be display. - for (var position = 65; position <= 420; position += 50) { - if (value === 40) - continue; - this.canvasContext.fillText(value, position, 170); // 200 is y-coordinate value. - value += 5; - } - }, - // drawIntersectLines: shows intersection line of x-axis and y-axis on canvas. - drawIntersectLines: function () { - this.canvasContext.beginPath(); - for (var position = 10; position <= 300; position += 70) { - this.canvasContext.moveTo(15, position); // 15 or 25 are x-coordinate value and position is y-coordinate value where intersectlines to be display. - this.canvasContext.lineTo(25, position); - } - for (var position = 70; position <= 420; position += 50) { - - this.canvasContext.moveTo(position, 145); // position is x-coordinate value and 175 or 185 are y-coordinate value where intersectlines to be display. - this.canvasContext.lineTo(position, 155); - } - this.canvasContext.lineWidth = 2; - this.canvasContext.stroke(); - }, - // drawHorizontalLine: shows horizontal lines on canvas. - drawHorizontalLine: function () { - this.canvasContext.beginPath(); - for (var position = 10; position <= 300; position += 35) { - if (position === 150) - continue; - this.canvasContext.moveTo(20, position); // 20 or 520 are x-coordinate value and position is y-coordinate value where horizontalline to be display. - this.canvasContext.lineTo(520, position); - } - this.canvasContext.strokeStyle = '#CCC'; - this.canvasContext.lineWidth = 1; - this.canvasContext.stroke(); - }, - // drawVerticalLine: shows vertical lines on canvas. - drawVerticalLine: function () { - this.canvasContext.beginPath(); - for (var position = 55; position <= 420; position += 35) { - this.canvasContext.moveTo(position, 0); // 0 or 360 are y-coordinate value and position is x-coordinate value where verticalline to be display. - this.canvasContext.lineTo(position, 360); - } - this.canvasContext.strokeStyle = '#CCC'; - this.canvasContext.lineWidth = 1; - this.canvasContext.stroke(); - }, - // drawCosCurve: draw cos curve. - drawCosCurve: function () { - this.canvasContext.beginPath(); - var xAxis; // represent x-coordinate value. - var yAxis; // represent y-coordinate value. - this.canvasContext.moveTo(20, 80); - for (xAxis = 20; xAxis <= 420; xAxis++) { - var y = 70*Math.cos(0 + (xAxis - 20) * this.wavelengthController) - //alert(y); - yAxis = 70 + (80 - (y))// 80 is y-coordinate value from where cose curve start. - this.canvasContext.lineTo(xAxis, yAxis) - } - this.canvasContext.strokeStyle = '#F7971E'; - this.canvasContext.lineWidth = 2; - this.canvasContext.stroke(); - this.canvasContext.save(); - }, - // drawRectangle: draw rectangle according x and y coordinates values. - drawRectangle: function (xCoordinates, yCoordinates, width, high) { - this.canvasContext.beginPath(); - this.canvasContext.globalAlpha= 0.8; - this.canvasContext.fillStyle='#9BBB5A'; - this.canvasContext.fillRect(xCoordinates, yCoordinates, width, high); - }, - // showAreaUnderCurve: show area under cos curve, value of i and sum during code execution. - showAreaUnderCurve: function () { - model.computeSum(); - this.callDrawRectangle(); - this.incrementInXCoordinates(); - model.incrementInWidth(); - this.sum = Math.round(model.sum * 100) / 100; - this.setInnerHtml('valuesum', this.sum); - this.setInnerHtml('valuei', model.inputValueA); - }, - // calculateXCoordinates: compute starting position of xCoordinatesValue on x-axis. - calculateXCoordinates: function () { - this.xCoordinatesValue = 20 + 10 * model.inputValueA; - }, - // incrementInXCoordinates: compute increment in xCoordinatesValue during code execution on x-axis. - incrementInXCoordinates: function () { - this.xCoordinatesValue = this.xCoordinatesValue + 10; - }, - // callDrawRectangle: calls drawRectangle method to fill area under cos curve according given x and y coordinates value. - callDrawRectangle: function () { - var dynamicValueOfX = this.xCoordinatesValue; - for (var i = 0; i < 10; i++) { - dynamicValueOfX++; - var y = 70*Math.cos(0 + (dynamicValueOfX - 20) * this.wavelengthController); - this.yCoordinatesValue = 70 + (80 - (y)); - this.drawRectangle(dynamicValueOfX, this.yCoordinatesValue, 1, 150 - this.yCoordinatesValue); - } - }, - // drawCanvas: calls methods that are use to draw axis, text, lines and cos curve. - drawCanvas: function () { - this.drawAxis(); - this.drawText(); - this.drawIntersectLines(); - this.drawHorizontalLine(); - this.drawVerticalLine(); - this.drawCosCurve(); - this.canvasContext.save(); - }, - /* validationInput: check validation of input that is given by user and if input value is valid + wavelengthController: 0.0472, //control wavelength of cos curve. + xCoordinatesValue: 0, // value of x coordinate. + yCoordinatesValue: 0, // value of y coordinate. + sum: 0, // round up the sum(model.sum) value to 2 decimal points. + canvasContext: "", // canvasContext have many properties and methods for drawing paths, boxes, circles, text, images, and more. + canvas: new Object(), // Object value of canvas. + currentSiblingElement: new Object(), // Object value of current sibling. + nextSiblingElement: new Object(), // Object value of next sibling. + // addClickEvent: add EventListener to other methods. + addClickEvent: function (id, method) { + var element = document.getElementById(id); + element.addEventListener("click", method, false); + }, + // activateEvents: calls addClickEvent method to add EventListener to other methods. + activateEvents: function () { + this.addClickEvent("okBtnId", function () { + var a = document.getElementById("valueA").value; + var b = document.getElementById("valueB").value; + if (a < 1 || a > 10 || b < 1 || b > 10) { + alert("Invalid Input.'a' and 'b' values shoud be in range 1-10."); + return false; + } + + view.validationInput(); + }); + this.addClickEvent("startBtnId", function () { + view.startExperiment(); + }); + this.addClickEvent("nextBtnId", function () { + view.plotCurveArea(); + }); + this.addClickEvent("stopBtnId", function () { + view.stopExperiment(); + }); + }, + // disableElement: makes element disable. + disableElement: function (Id) { + document.getElementById(Id).disabled = true; + }, + // enableElement: makes element enable. + enableElement: function (Id) { + document.getElementById(Id).disabled = false; + }, + // replaceElement: replace one element by another element. + replaceElement: function (id1, id2) { + document.getElementById(id1).style.display = "none"; + document.getElementById(id2).style.display = "block"; + }, + // changeClass: changes class name of a element. + changeClass: function (id, className) { + document.getElementById(id).className = className; + }, + // applyColorClass: adds new color class to a element. + applyColorClass: function (id, colorClass) { + document.getElementById(id).classList.add(colorClass); + }, + // removeColorClass: removes color class from element. + removeColorClass: function (id, colorClass) { + document.getElementById(id).classList.remove(colorClass); + }, + // executionWithColour: shows execution of code by changing color in code Content. + executionWithColour: function () { + this.removeColorClass(this.currentSiblingElement.id, "redClass"); + this.applyColorClass(this.nextSiblingElement.id, "redClass"); + }, + // getValue: return value from element. + getValue: function (id) { + var value = document.getElementById(id).value; + return value; + }, + // setValue: set given value to a element. + setValue: function (id, valueToSet) { + document.getElementById(id).value = valueToSet; + }, + // getElementByClass: return element by given class name. + getElementByClass: function (className) { + var element = document.getElementsByClassName(className); + return element[0]; + }, + // getNextSiblingElement: return next sibling element. + getNextSiblingElement: function (element) { + var nextSiblingElement = element.nextSibling; + nextSiblingElement = nextSiblingElement.nextSibling; + return nextSiblingElement; + }, + // setInnerHtml: set innerText to a element. + setInnerHtml: function (id, innerHTML) { + document.getElementById(id).innerHTML = innerHTML; + }, + // resetVariables: reset all variables to it's initial state. + resetVariables: function () { + model.inputValueA = ""; + model.inputValueB = ""; + this.xCoordinatesValue = 0; + this.yCoordinatesValue = 0; + model.sum = 0; + this.sum = 0; + }, + // resetTextFieldValue: reset text field to their initial state. + resetTextFieldValue: function () { + this.setValue("valueA", ""); + this.setValue("valueB", ""); + }, + // resetButtonAndTextField: reset button it's initial state and do text field enable. + resetButtonAndTextField: function () { + this.replaceElement("stopBtnId", "startBtnId"); + this.enableElement("valueA"); + this.enableElement("valueB"); + this.enableElement("okBtnId"); + this.disableElement("nextBtnId"); + this.disableElement("stopBtnId"); + this.changeClass("okBtnId", "button startButton"); + this.changeClass("startBtnId", "buttonDisable myStartButton"); + this.changeClass("stopBtnId", "buttonDisable startButton"); + this.changeClass("nextBtnId", "buttonDisable nextButton"); + }, + // endOfExecution: work at end of code execution and with stop button to reset whole experiment at it's initial state. + endOfExecution: function () { + // this.clearOutputValues(); + this.resetVariables(); + this.resetTextFieldValue(); + this.resetButtonAndTextField(); + var idOfRedText = this.getElementByClass("redClass").id; + this.removeColorClass(idOfRedText, "redClass"); + }, + // clearOutputValues: clear all output values that displayed during the execution. + clearOutputValues: function () { + this.setInnerHtml("vari", ""); + this.setInnerHtml("valuei", ""); + this.setInnerHtml("valuesum", ""); + this.setInnerHtml("varsum", ""); + this.setInnerHtml("integrText", ""); + this.setInnerHtml("integrValue", ""); + }, + // getCanvas: get canvas and canvasContext as a Object. + getCanvas: function () { + this.canvas = document.getElementById("myCanvas"); + this.canvasContext = this.canvas.getContext("2d"); + }, + // drawAxis: draw x-axis and y-axis on canvas. + drawAxis: function () { + this.getCanvas(); + this.canvasContext.beginPath(); + this.canvasContext.moveTo(20, 0); // 20 is x-coordinate value and 0 is y-coordinate value. + this.canvasContext.lineTo(20, 300); // 20 is x-coordinate value and 360 is y-coordinate value. + this.canvasContext.moveTo(20, 150); // 20 is x-coordinate value and 180 is y-coordinate value. + this.canvasContext.lineTo(420, 150); // 520 is x-coordinate value and 180 is y-coordinate value. + this.canvasContext.strokeStyle = "#3072b3"; + this.canvasContext.lineWidth = 2; + this.canvasContext.stroke(); + }, + // drawText: labels x-axis and y-axis with text on canvas. + drawText: function () { + this.canvasContext.font = "18px Arial"; + this.canvasContext.beginPath(); + this.canvasContext.fillText("0", 8, 150); // 0 is text that to be display, 8 is x-coordinate value and 180 is y-coordinate value. + this.canvasContext.fillText("1", 8, 85); // 1 is text that to be display, 8 is x-coordinate value and 100 is y-coordinate value. + this.canvasContext.fillText("2", 8, 15); // 2 is text that to be display, 8 is x-coordinate value and 20 is y-coordinate value. + this.canvasContext.fillText("1", 8, 220); // 1 is text that to be display, 8 is x-coordinate value and 260 is y-coordinate value. + this.canvasContext.fillText("2", 8, 290); // 2 is text that to be display, 8 is x-coordinate value and 340 is y-coordinate value. + var value = 5; // 5 is value to display and position is x-coordinate value where value to be display. + for (var position = 65; position <= 420; position += 50) { + if (value === 40) continue; + this.canvasContext.fillText(value, position, 170); // 200 is y-coordinate value. + value += 5; + } + }, + // drawIntersectLines: shows intersection line of x-axis and y-axis on canvas. + drawIntersectLines: function () { + this.canvasContext.beginPath(); + for (var position = 10; position <= 300; position += 70) { + this.canvasContext.moveTo(15, position); // 15 or 25 are x-coordinate value and position is y-coordinate value where intersectlines to be display. + this.canvasContext.lineTo(25, position); + } + for (var position = 70; position <= 420; position += 50) { + this.canvasContext.moveTo(position, 145); // position is x-coordinate value and 175 or 185 are y-coordinate value where intersectlines to be display. + this.canvasContext.lineTo(position, 155); + } + this.canvasContext.lineWidth = 2; + this.canvasContext.stroke(); + }, + // drawHorizontalLine: shows horizontal lines on canvas. + drawHorizontalLine: function () { + this.canvasContext.beginPath(); + for (var position = 10; position <= 300; position += 35) { + if (position === 150) continue; + this.canvasContext.moveTo(20, position); // 20 or 520 are x-coordinate value and position is y-coordinate value where horizontalline to be display. + this.canvasContext.lineTo(520, position); + } + this.canvasContext.strokeStyle = "#CCC"; + this.canvasContext.lineWidth = 1; + this.canvasContext.stroke(); + }, + // drawVerticalLine: shows vertical lines on canvas. + drawVerticalLine: function () { + this.canvasContext.beginPath(); + for (var position = 55; position <= 420; position += 35) { + this.canvasContext.moveTo(position, 0); // 0 or 360 are y-coordinate value and position is x-coordinate value where verticalline to be display. + this.canvasContext.lineTo(position, 360); + } + this.canvasContext.strokeStyle = "#CCC"; + this.canvasContext.lineWidth = 1; + this.canvasContext.stroke(); + }, + // drawCosCurve: draw cos curve. + drawCosCurve: function () { + this.canvasContext.beginPath(); + var xAxis; // represent x-coordinate value. + var yAxis; // represent y-coordinate value. + this.canvasContext.moveTo(20, 80); + for (xAxis = 20; xAxis <= 420; xAxis++) { + var y = 70 * Math.cos(0 + (xAxis - 20) * this.wavelengthController); + //alert(y); + yAxis = 70 + (80 - y); // 80 is y-coordinate value from where cose curve start. + this.canvasContext.lineTo(xAxis, yAxis); + } + this.canvasContext.strokeStyle = "#F7971E"; + this.canvasContext.lineWidth = 2; + this.canvasContext.stroke(); + this.canvasContext.save(); + }, + // drawRectangle: draw rectangle according x and y coordinates values. + drawRectangle: function (xCoordinates, yCoordinates, width, high) { + this.canvasContext.beginPath(); + this.canvasContext.globalAlpha = 0.8; + this.canvasContext.fillStyle = "#9BBB5A"; + this.canvasContext.fillRect(xCoordinates, yCoordinates, width, high); + }, + // showAreaUnderCurve: show area under cos curve, value of i and sum during code execution. + showAreaUnderCurve: function () { + model.computeSum(); + this.callDrawRectangle(); + this.incrementInXCoordinates(); + model.incrementInWidth(); + this.sum = Math.round(model.sum * 100) / 100; + this.setInnerHtml("valuesum", this.sum); + this.setInnerHtml("valuei", model.inputValueA); + }, + // calculateXCoordinates: compute starting position of xCoordinatesValue on x-axis. + calculateXCoordinates: function () { + this.xCoordinatesValue = 20 + 10 * model.inputValueA; + }, + // incrementInXCoordinates: compute increment in xCoordinatesValue during code execution on x-axis. + incrementInXCoordinates: function () { + this.xCoordinatesValue = this.xCoordinatesValue + 10; + }, + // callDrawRectangle: calls drawRectangle method to fill area under cos curve according given x and y coordinates value. + callDrawRectangle: function () { + var dynamicValueOfX = this.xCoordinatesValue; + for (var i = 0; i < 10; i++) { + dynamicValueOfX++; + var y = + 70 * Math.cos(0 + (dynamicValueOfX - 20) * this.wavelengthController); + this.yCoordinatesValue = 70 + (80 - y); + this.drawRectangle( + dynamicValueOfX, + this.yCoordinatesValue, + 1, + 150 - this.yCoordinatesValue + ); + } + }, + // drawCanvas: calls methods that are use to draw axis, text, lines and cos curve. + drawCanvas: function () { + this.drawAxis(); + this.drawText(); + this.drawIntersectLines(); + this.drawHorizontalLine(); + this.drawVerticalLine(); + this.drawCosCurve(); + this.canvasContext.save(); + }, + /* validationInput: check validation of input that is given by user and if input value is valid then make text field and ok button disable and make start button enable. */ - validationInput: function () { - var valueA1 = this.getValue('valueA'); - var valueB1 = this.getValue('valueB'); - var valueA2 = parseInt(valueA1); - var valueB2 = parseInt(valueB1); - if (valueA1 === '' || valueB1 === '') { - alert('Enter Value of a and b'); - return false; - } - else if ( isNaN(valueA1) || isNaN(valueB1)) { - 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'); - return false; - } - else { - model.inputValueA = valueA2; - model.inputValueB = valueB2; - } - this.changePropertyOfElements(); - this.clearOutputValues(); - this.restoreCanvas(); - }, - // changePropertyOfElements: changes property of elemants with enableElement, disableElement and changeClass. - changePropertyOfElements: function () { - this.enableElement('startBtnId'); - this.disableElement('okBtnId'); - this.disableElement('valueA'); - this.disableElement('valueB'); - this.changeClass('okBtnId', 'buttonDisable startButton'); - this.changeClass('startBtnId', 'button myStartButton'); - }, - // restoreCanvas: restor canvas it's initial state after clear previously drawed canvas. - restoreCanvas: function () { - this.canvasContext.clearRect(0, 0, this.canvas.width, this.canvas.height); // to clear previously drawed canvas. - this.canvasContext.restore(); // restor canvas it's initial state. - this.drawCanvas(); // redraw graph on canvas. - }, - // startExperiment: work to start code execution. - startExperiment: function () { - this.replaceElement('startBtnId', 'stopBtnId'); - this.enableElement('stopBtnId'); - this.enableElement('nextBtnId'); - this.disableElement('startBtnId'); - this.applyColorClass('NumApproCodeContent1', 'redClass'); - this.changeClass('startBtnId', 'myStartButton button'); - this.changeClass('stopBtnId', 'myStartButton button'); - this.changeClass('nextBtnId', 'nextButton button'); - }, - // stopExperiment: stop code execution at any point. - stopExperiment: function () { - this.endOfExecution(); - }, - /* plotCurveArea: fill area under cos curve, show value of i and sum according code execution, - and at the end of code execution display final result. */ - plotCurveArea: function () { - this.currentSiblingElement = this.getElementByClass('redClass'); - if (this.currentSiblingElement.id === 'NumApproCodeContent10') { - this.endOfExecution(); - } - this.nextSiblingElement = this.getNextSiblingElement(this.currentSiblingElement); - if (this.nextSiblingElement.id === 'NumApproCodeContent2') { - this.executionWithColour(); - this.setInnerHtml('vari', 'i = '); - } - else if (this.nextSiblingElement.id === 'NumApproCodeContent3') { - this.executionWithColour(); - this.setInnerHtml('varsum', 'sum = '); - } - else if (this.nextSiblingElement.id === 'NumApproCodeContent4') { - this.executionWithColour(); - } - else if (this.nextSiblingElement.id === 'NumApproCodeContent5') { - this.executionWithColour(); - this.setInnerHtml('valuei', '0'); - this.setInnerHtml('valuesum', '0'); - } - else if (this.nextSiblingElement.id === 'NumApproCodeContent6') { - this.executionWithColour(); - this.calculateXCoordinates(); - } - else if (this.nextSiblingElement.id === 'NumApproCodeContent7') { - this.executionWithColour(); - this.showAreaUnderCurve(); - } - else if (this.nextSiblingElement.id === 'NumApproCodeContent8') { - this.executionWithColour(); - } - else if (this.nextSiblingElement.id === 'NumApproCodeContent9') { - if (model.inputValueA < model.inputValueB) { - this.removeColorClass(this.currentSiblingElement.id, 'redClass'); - this.applyColorClass('NumApproCodeContent6', 'redClass'); - } - else if (model.inputValueA = model.inputValueB) { - this.executionWithColour(); - this.setInnerHtml('integrText', 'INTEGRATION VALUE = '); - this.setInnerHtml('integrValue', this.sum); - } - } - else if (this.nextSiblingElement.id === 'NumApproCodeContent10') { - this.executionWithColour(); - } - }, - // init: calls methods to draw canvas and activate events. - init: function () { - this.drawCanvas(); - this.activateEvents(); - } -} + validationInput: function () { + var valueA1 = this.getValue("valueA"); + var valueB1 = this.getValue("valueB"); + var valueA2 = parseInt(valueA1); + var valueB2 = parseInt(valueB1); + if (valueA1 === "" || valueB1 === "") { + alert("Enter Value of a and b"); + return false; + } else if (isNaN(valueA1) || isNaN(valueB1)) { + 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"); + return false; + } else { + model.inputValueA = valueA2; + model.inputValueB = valueB2; + } + this.changePropertyOfElements(); + this.clearOutputValues(); + this.restoreCanvas(); + }, + // changePropertyOfElements: changes property of elemants with enableElement, disableElement and changeClass. + changePropertyOfElements: function () { + this.enableElement("startBtnId"); + this.disableElement("okBtnId"); + this.disableElement("valueA"); + this.disableElement("valueB"); + this.changeClass("okBtnId", "buttonDisable startButton"); + this.changeClass("startBtnId", "button myStartButton"); + }, + // restoreCanvas: restor canvas it's initial state after clear previously drawed canvas. + restoreCanvas: function () { + this.canvasContext.clearRect(0, 0, this.canvas.width, this.canvas.height); // to clear previously drawed canvas. + this.canvasContext.restore(); // restor canvas it's initial state. + this.drawCanvas(); // redraw graph on canvas. + }, + // startExperiment: work to start code execution. + startExperiment: function () { + this.replaceElement("startBtnId", "stopBtnId"); + this.enableElement("stopBtnId"); + this.enableElement("nextBtnId"); + this.disableElement("startBtnId"); + this.applyColorClass("NumApproCodeContent1", "redClass"); + this.changeClass("startBtnId", "myStartButton button"); + this.changeClass("stopBtnId", "myStartButton button"); + this.changeClass("nextBtnId", "nextButton button"); + }, + // stopExperiment: stop code execution at any point. + stopExperiment: function () { + this.endOfExecution(); + }, + /* plotCurveArea: fill area under cos curve, show value of i and sum according code execution, + and at the end of code execution display final result. */ + + plotCurveArea: function () { + this.currentSiblingElement = this.getElementByClass("redClass"); + if (this.currentSiblingElement.id === "NumApproCodeContent10") { + this.endOfExecution(); + } + this.nextSiblingElement = this.getNextSiblingElement( + this.currentSiblingElement + ); + if (this.nextSiblingElement.id === "NumApproCodeContent2") { + this.executionWithColour(); + this.setInnerHtml("vari", "i = "); + } else if (this.nextSiblingElement.id === "NumApproCodeContent3") { + this.executionWithColour(); + this.setInnerHtml("varsum", "sum = "); + } else if (this.nextSiblingElement.id === "NumApproCodeContent4") { + this.executionWithColour(); + } else if (this.nextSiblingElement.id === "NumApproCodeContent5") { + this.executionWithColour(); + this.setInnerHtml("valuei", "0"); + this.setInnerHtml("valuesum", "0"); + } else if (this.nextSiblingElement.id === "NumApproCodeContent6") { + this.executionWithColour(); + this.calculateXCoordinates(); + } else if (this.nextSiblingElement.id === "NumApproCodeContent7") { + this.executionWithColour(); + this.showAreaUnderCurve(); + } else if (this.nextSiblingElement.id === "NumApproCodeContent8") { + this.executionWithColour(); + } else if (this.nextSiblingElement.id === "NumApproCodeContent9") { + if (model.inputValueA < model.inputValueB) { + this.removeColorClass(this.currentSiblingElement.id, "redClass"); + this.applyColorClass("NumApproCodeContent6", "redClass"); + } else if ((model.inputValueA = model.inputValueB)) { + this.executionWithColour(); + this.setInnerHtml("integrText", "INTEGRATION VALUE = "); + this.setInnerHtml("integrValue", this.sum); + } + } else if (this.nextSiblingElement.id === "NumApproCodeContent10") { + this.executionWithColour(); + } + }, + // init: calls methods to draw canvas and activate events. + init: function () { + this.drawCanvas(); + this.activateEvents(); + }, +}; // onload function: call init method on window onload. window.onload = function () { - view.init(); -} + view.init(); +}; From e273b2d54be3351526923f28e38f346c35c46a25 Mon Sep 17 00:00:00 2001 From: SHAIK SAJEETH Date: Tue, 7 Jul 2020 08:25:02 +0530 Subject: [PATCH 10/11] updated range of input --- src/lab/exp3/simulation/advControlFlow.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/lab/exp3/simulation/advControlFlow.js b/src/lab/exp3/simulation/advControlFlow.js index 9f83de25..4b4e1887 100644 --- a/src/lab/exp3/simulation/advControlFlow.js +++ b/src/lab/exp3/simulation/advControlFlow.js @@ -35,11 +35,19 @@ window.view = { getInput: function() { var inputValue = document.getElementById('simpleLoopInput').value model.inp = Number(inputValue) + if (inputValue < 0 || inputValue > 20) { + alert("Invalid Input.'a' value shoud be in range 0-20."); + return false; + } this.clearExecutionSection() }, getNestedInput: function() { var inputValue = document.getElementById('nestedLoopInput').value model.nestedInp = Number(inputValue) + if (inputValue < 0 || inputValue > 20) { + alert("Invalid Input.'a' value shoud be in range 0-20."); + return false; + } this.clearExecutionSection() }, activateEvents: function() { @@ -377,4 +385,4 @@ window.view = { this.activateEvents() } } -window.onload = function() { view.init() } \ No newline at end of file +window.onload = function() { view.init() } From 5a704a3d7920a3fb0fa46c6f3e62139d4bcb39c0 Mon Sep 17 00:00:00 2001 From: SHAIK SAJEETH Date: Tue, 7 Jul 2020 11:38:15 +0530 Subject: [PATCH 11/11] updated a,b,c,d valus to 0 on edit. --- src/lab/exp10/simulation/expEvaluation.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/lab/exp10/simulation/expEvaluation.js b/src/lab/exp10/simulation/expEvaluation.js index ef7c4079..65373c2b 100644 --- a/src/lab/exp10/simulation/expEvaluation.js +++ b/src/lab/exp10/simulation/expEvaluation.js @@ -892,7 +892,15 @@ window.view = { }, activateEvents: function() { this.addClickEvent('buttonSave', function () { view.freezeInputs() }) - this.addClickEvent('buttonEdit', function () { view.deFreezeInputs() }) + this.addClickEvent('buttonEdit', function () { + + document.getElementById('a').value=0; + document.getElementById('b').value=0; + document.getElementById('c').value=0; + document.getElementById('d').value=0; + + + view.deFreezeInputs() }) this.addClickEvent('buttonStart', function () { view.validateExpression() }) this.addClickEvent('buttonNext', function () { view.evaluate() }) this.addChangeEvent('operatorList', function () { view.setOperatorEnvironment() })