jshawl · August 29, 2015 14:02
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8">
    <title>CodePen - A Pen by tkazi</title>
    <link rel="stylesheet" href="style.css" media="screen" type="text/css" />
  </head>
  <body>
    <div class="ordered">
      <h3>ordered</h3>
      <div class="challenge1 challenges" id="2">
 	<p>2 x 1<span> = </span><input size="4"></p> 
      </div>
    </div> 
    <div class="random"> 
      <h3>random</h3>
      <div class="challenge2 challenges" id="2">
 	<p>2 x 1<span> = </span><input size="4"></input></p> 
      </div>
    </div>
    <script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
    <script src="scripts.js"></script>
  </body>
 </html>
diff --git a/scripts.js b/scripts.js
 // digits array for multiplicant that will be generated by random
 var digits = [2,3,4,5,6,7,8,9];

 var digitsRandom = [2,3,4,5,6,7,8,9];


 // input to submit when enter key is pushed
 $('body').on('keyup','input',function(e){
 if(e.keyCode == 13)
 {
  $(this).trigger("enterKey");
 }
 });


 // when a value is entered by the user, do the following:
 // a) determine if the user is in challenge1 or 2 or n
 // b) check to see if the answer is valid or invalid
 // c) generate a new line with a new input box
 // d) repeat (b) and (c) till 1-9 multiplicants are shown


 var indexValue = 0; //to display numbers for the first challenge


 $('.challenges').on("enterKey",'input',function(e){

 // checking for class to determine if the input is triggered in challenge1 or challenge2 or challenge'n'

 if ($(this).parent().parent().hasClass("challenge1"))
  { 
    if (indexValue == 8)
      {
         $("body").append("Score: (yet to be calculated)");
         return;
      }
    else 
      {
          $(".challenge1").append("<p>2 x "+digits[indexValue]+"<span> = </span><input size='4'></p>");
          indexValue = indexValue + 1;
      }
 
    $(this).parent().next().find("input").focus(); //makes the next input box active with the cursor
    
    //grabbing the ID to compute the value for answer. if correct, then add class of valid that turns background green, else invalid for red
    var grabID = $(this).parent().parent().attr("id");
    var answer = ($(this).parent().index()+1) * grabID;

 // validating if the user's input is same as the answer
  if (answer == $(this).val())
  {
    $(this).parent().removeClass("isValid notValid");
    $(this).parent().addClass("isValid"); 
    return;
  }
  
  else 
  {
    $(this).parent().removeClass("isValid notValid");
    $(this).parent().addClass("notValid");	
    return
  }	

 }// ends challenge1 if clause

  
 // if user is in challenge2 
 else if ($(this).parent().parent().hasClass("challenge2"))
 	{	
 		 if (digitsRandom.length == 0) //end of the array
    	{
        $("body").append("Score: (yet to be calculated)");
    	}
    	else //generate random multiplicants
    	{
    		var x = Math.floor((Math.random() * digitsRandom.length));
        $(".challenge2").append("<p>2 x "+digitsRandom.splice(x,1)[0]+"<span> = </span><input size='4'></p>");  
    	}
 	}// end challenge2 else if clause

 }); //end input


diff --git a/style.css b/style.css
 .random, .ordered {width:120px; padding:10px; text-align:center;
 height:450px; border:1px solid red; display:inline-block;
 margin:0 10px; float:left;}

 .challenges .isValid 
 {background:yellowgreen; color:white;}


 .challenges .notValid 
 {background:tomato; color:white;}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>CodePen - A Pen by tkazi</title>
	<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
	</head>
	<body>
	<div class="ordered">
	<h3>ordered</h3>
	<div class="challenge1 challenges" id="2">
	<p>2 x 1<span> = </span><input size="4"></p>
	</div>
	</div>
	<div class="random">
	<h3>random</h3>
	<div class="challenge2 challenges" id="2">
	<p>2 x 1<span> = </span><input size="4"></input></p>
	</div>
	</div>
	<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
	<script src="scripts.js"></script>
	</body>
	</html>
	// digits array for multiplicant that will be generated by random
	var digits = [2,3,4,5,6,7,8,9];

	var digitsRandom = [2,3,4,5,6,7,8,9];


	// input to submit when enter key is pushed
	$('body').on('keyup','input',function(e){
	if(e.keyCode == 13)
	{
	$(this).trigger("enterKey");
	}
	});


	// when a value is entered by the user, do the following:
	// a) determine if the user is in challenge1 or 2 or n
	// b) check to see if the answer is valid or invalid
	// c) generate a new line with a new input box
	// d) repeat (b) and (c) till 1-9 multiplicants are shown


	var indexValue = 0; //to display numbers for the first challenge


	$('.challenges').on("enterKey",'input',function(e){

	// checking for class to determine if the input is triggered in challenge1 or challenge2 or challenge'n'

	if ($(this).parent().parent().hasClass("challenge1"))
	{
	if (indexValue == 8)
	{
	$("body").append("Score: (yet to be calculated)");
	return;
	}
	else
	{
	$(".challenge1").append("<p>2 x "+digits[indexValue]+"<span> = </span><input size='4'></p>");
	indexValue = indexValue + 1;
	}

	$(this).parent().next().find("input").focus(); //makes the next input box active with the cursor

	//grabbing the ID to compute the value for answer. if correct, then add class of valid that turns background green, else invalid for red
	var grabID = $(this).parent().parent().attr("id");
	var answer = ($(this).parent().index()+1) * grabID;

	// validating if the user's input is same as the answer
	if (answer == $(this).val())
	{
	$(this).parent().removeClass("isValid notValid");
	$(this).parent().addClass("isValid");
	return;
	}

	else
	{
	$(this).parent().removeClass("isValid notValid");
	$(this).parent().addClass("notValid");
	return
	}

	}// ends challenge1 if clause


	// if user is in challenge2
	else if ($(this).parent().parent().hasClass("challenge2"))
	{
	if (digitsRandom.length == 0) //end of the array
	{
	$("body").append("Score: (yet to be calculated)");
	}
	else //generate random multiplicants
	{
	var x = Math.floor((Math.random() * digitsRandom.length));
	$(".challenge2").append("<p>2 x "+digitsRandom.splice(x,1)[0]+"<span> = </span><input size='4'></p>");
	}
	}// end challenge2 else if clause

	}); //end input
	.random, .ordered {width:120px; padding:10px; text-align:center;
	height:450px; border:1px solid red; display:inline-block;
	margin:0 10px; float:left;}

	.challenges .isValid
	{background:yellowgreen; color:white;}


	.challenges .notValid
	{background:tomato; color:white;}