asked on

showing divs (area model)

Hello Experts,
I am trying to make a javascript program for my students that allows them to manipulate and show an area model for a multiplication problem. For example 6 x 7 would show a model that is 6 units long and 7 units high.
I was trying to show this with a div that would change size off to the right. (yes the css is wrong and should be moved. everything is in beginning stages) Using javascript, I couldn't get the div to change size. Eventually it would also be best if there was a way to label the div's height and width and show tiles of single units if it is possible. For example 6 x 7 would show 42 tiles off to the right 6 tiles long and 7 tiles high with labels on each side. Is there a better way to do this than my approach??
Thank you for any help or advice that you can provide,
Rhyno99

<body>
<script type="text/javascript">
function calculate (){
 var f1 = document.getElementById('factor1').value;
 var f2 = document.getElementById('factor2').value;
  document.getElementById('product').value = f1*f2;
  document.getElementById("area_model").height = f1;
  document.getElementById("area_model").width = f2;
} 
</script>

<form>
 <div id="main">
<div id="area_model" style="background-color:#0F0; border:thick; border-color:#000; border-style:solid; float:right";>
</div>
<div id="problem" style="float:left";>
	<div id="line_one">
    	<div id="first_factor"><input type="text" name="p1" id="factor1" class="problemNum1" maxlength="4" />
    	</div>
	</div>
    
    <div id="line_two">
		<div id="second_factor"><input type="text" name="p1" id="factor2" class="problemNum1" maxlength="4"/>
		</div>
    	<div id="operation"><input type="text" name="operation" id="operation" class="problemNum1" maxlength="1" value="x" />
    	</div>
    </div>
    
    <div id="inputAnswer" >
		<div id="answer">
        <input type="text" name="p1" id="product" class="product"/>
		</div>
		<div id="second_product" style="display:none">
        <input type="text" name="p1" id="product2" class="problemNum1" readonly="readonly"/>
		</div>
		<div id="final_product" style="display:none">
        <input type="text" name="p1" id="num1" class="problemNum1" readonly="readonly"/>
		</div>
    </div>
</div>

<div id="solve"><input type="button" onclick="calculate();" value="Show and Solve"/>
</div>
</div> 
</form>

</body>

Open in new window

ASKER CERTIFIED SOLUTION

baretree

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

rhyno99

ASKER

BareTree,
Thanks for your help.

areaModel.style.height = f1 + "px";
areaModel.style.width = f2 + "px";
} catch (err) {
var txt = "Error: " + err.description;
alert(txt);
}

that's funny. I thought I tried that = f1 + "px" . I guess I must have done something a wrong. Looking at the code, I couldn't get the alert to show up. What is it for and what does it do? I thought it showed if a word was inserted instead of a number.

I went with
areaModel.style.height = (f1 * 10)+ "px";
areaModel.style.width = (f2 * 10)+ "px";

Do you think there is a way to show as individual tiles or add a label?

baretree

i put an alert because i was testing and wanted to be sure there were no errors
what it does is to show a message if for example i had an error invoking the methods

like

areaModel.style.width() = f1 + "px;" // that's an error cause width doesn't support that "method"

actually you shouldn't be getting any alerts.... you can get rid of the try-catch

and what do you mean exactly by the last question?

rhyno99

ASKER

Hi baretree,
Thanks for explaining.

The area models for students to show multiplication are based on 1cm x 1cm cubes that students move around and manipulate. Maybe you've seen them in school way back. The larger div is good, but I think it would be more effective if I was able to show the tiles, or cubes in the model. For example 6 x 7 = 42; it would be great to show seven long and six high and the students could actually count them if they wanted. I hope that this makes sense.

I was thinking of making divs that are square in width and height that could be created and placed by javascript when a problem is created, but I'm not sure quite how it would work or if there is a better way. Any thoughts? If nothing comes to mind I will start a new question, but I would appreciate any input on this.
Thanks,
rhyno99