Im trying to take this table using javaScript add and answer section that people can input

JavaScript
1

What I’m trying to do is add a text box where the user would put in the answer and the background would change colour if the inputted answer is not correct. Use the DOM to retrieve all textboxes and a loop to add an event handler using the DOM and addEventListener for the blur event. Use the event parameter to access the current text box in the Target property. Use that nodes parentNode to get the cell, and that nodes parent node to get the row. Use this to call the calculation method as before but change expected result to be a parameter passed in. Use the Target Value for that parameter.

<!Doctype html>
<html>
<!--Header-->
<head>
	<style>
		td{
			padding-top: 3px;
			padding-bottom: 3px;
			padding-right: 20px;
			padding-left: 20px;
		}
	</style>
	
    <title>JavaScript Assignment 5- Jasmine Lusty</title>
    <!--can contain javascript imports but page javascipt should be at the bottom of the body-->
</head>
<!--Body-->
<body>

<!-- Math Html -->
	<h4>Math!</h4>
    <table>
        <tbody>
            <tr class="Calculation">
                <td>5</td>
                <td>3</td>
                <td><input type="text" class ='expectedResult'></td>
            </tr>
            <tr class="Calculation">
                <td>7</td>
                <td>6</td>
                <td><input type="text" class ='expectedResult'></td>
            </tr>
            <tr class="Calculation">
                <td>5</td>
                <td>5</td>
                <<td><input type="text" class ='aexpectedResult'></td>
            </tr>
            <tr class="Calculation">
                <td>8</td>
                <td>3</td>
                <<td><input type="text" class ='expectedResult'></td>
            </tr>
            <tr class="Calculation">
                <td>4</td>
                <td>7</td>
                <td><input type="text" class ='expectedResult'></td>
            </tr>
            <tr class="Calculation">
                <td>3</td>
                <td>9</td>
                <td><input type="text" class ='expectedResult'></td>
            </tr>
            <tr class="Calculation">
                <td>8</td>
                <td>5</td>
                <td><input type="text" class ='expectedResult'></td>
            </tr>
            <tr class="Calculation">
                <td>2</td>
                <td>6</td>
                <td><input type="text" class ='expectedResult'></td>
            </tr>
            <tr class="Calculation">
                <td>5</td>
                <td>9</td>
                <td><input type="text" class ='expectedResult'></td>
            </tr>
            <tr class="Calculation">
                <td>6</td>
                <td>6</td>
                <td><input type="text" class ='expectedResult'></td>
            </tr>
        </tbody>
    </table>

<!--javascript code-->

<!---- Math Code --->
    <script type="text/javascript">
           
  function checkCalculations(firstNumber, secondNumber, expectedResult,result){
	  var numberOfCalculations = calculations.length;
        for (var counter = 0; counter < numberOfCalculations; counter++)
        {
            var calculation = calculations[counter]; 

            var firstNumber = Number(calculation.childNodes[1].textContent);
            var secondNumber = Number(calculation.childNodes[3].textContent);
            var expectedResult =Number(calculation.childNodes[5].textContent);
            var result = firstNumber + secondNumber; 
            if (result == expectedResult) 
            {  
            }
            else
            {
                calculation.style.backgroundColor = "#FA8072";
				
//                var resultCell = document.createElement("td");
//                calculation.appendChild(resultCell);
//                resultCell.appendChild(document.createTextNode(result));
            }
            
        }
	  
  }
        var calculations = document.getElementsByClassName("Calculation");
		
checkCalculations();
          
    </script>
	<body>

</body>
</html>

Screen Shot 2020-05-01 at 3.22.07 PM
Screen Shot 2020-05-01 at 3.22.07 PM722×758 55.1 KB

2

Hi there jlusty,

here is just one possible solution…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>JavaScript Assignment 5- Jasmine Lusty</title>

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 150% sans-serif;
 }
 
h1 {
    font-size: 1.25em;
    color: #444;
 }

#addition-table {
    display: inline-block;
    max-width: 20em;
    padding: 1em;
    border: 1px solid #999;
    border-radius: 0.5em;
    background-color: #fff;
    box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.4 ), 
         0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
 }
 
#addition-table td {
    padding: 0.25em 1.5em;;
 }
 
#addition-table input {
   width: 100%;
   box-sizing: border-box;
 }
 
.wrong {
    background-color: #fa8072;
 }
 
.right {
    background-color: #0f0;
 }
</style>

</head>
<body>

<h1>Math!</h1>

<table id="addition-table">
 <tbody>
  <tr>
   <td>5</td>
   <td>3</td>
   <td><input type="text"></td>
  </tr><tr>
   <td>7</td>
   <td>6</td>
   <td><input type="text"></td>
  </tr><tr>
   <td>5</td>
   <td>5</td>
   <td><input type="text"></td>
  </tr><tr>
   <td>8</td>
   <td>3</td>
   <td><input type="text"></td>
  </tr><tr>
   <td>4</td>
   <td>7</td>
   <td><input type="text"></td>
  </tr><tr>
   <td>3</td>
   <td>9</td>
   <td><input type="text"></td>
  </tr><tr>
   <td>8</td>
   <td>5</td>
   <td><input type="text"></td>
  </tr><tr>
   <td>2</td>
   <td>6</td>
   <td><input type="text"></td>
  </tr><tr>
   <td>5</td>
   <td>9</td>
   <td><input type="text"></td>
  </tr><tr>
   <td>6</td>
   <td>6</td>
   <td><input type="text"></td>
  </tr>
 </tbody>
</table>

<script>
(function( d )  { 
   'use strict';
   var tr = d.querySelectorAll( 'tr' ), 
       td = d.querySelectorAll( 'td' ), 
      inp = d.querySelectorAll( 'input' ),
   totals = [], c;
   for ( c = 0; c < tr.length; c ++ ) {
         totals.push( parseFloat( td[ c * 3 ].textContent ) + 
                      parseFloat( td[ c * 3 + 1 ].textContent ) );
         inp[ c ].value = ' ';				   
         inp[ c ].addEventListener( 'blur', check_answer( c ), false );
		    
    }
	
function check_answer( c ) {
   inp[ c ].onblur = function() { 
      if( inp[ c ].value == totals[ c ] ) {
          tr[ c ].classList.add( 'right' );
         }
      else {
         tr[ c ].classList.remove( 'right' );
         tr[ c ].classList.add( 'wrong' );
         }
      }			   
   }
 }( document ) );         
</script>

</body>
</html>

coothead

2 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.