I am programming a calculator in AngularJS. I am stuck on a validating user input. I do not want the user to be able to enter two 2 operators ('+','/','*') next to each other.
Thus every time, I try to compare the last character and the second to last character of the string. But I always find I have two operator characters.
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.expression = "";
var liste = ['+', '/', '*'];
$scope.add = function (ope) {
$scope.expression += String(ope);
var der = $scope.expression[$scope.expression.length - 1];
var avantDer = $scope.expression[$scope.expression.length - 2];
if ($scope.expression.length > 3 && liste.includes(der) && liste.includes(avantDer)) {
alert("error");
} else {
$scope.expression += String(ope);
}
};
});
You are very close. The problem is that you are adding the operator to the expression before you have checked if it is valid or not. It is better to check the last character of the existing expression and the new character as a separate variable.
You also want to check if the length of expression is greater than 0 rather than 3 as otherwise, the user could enter two '+' characters straight away when the length is less than 3.
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.expression = "";
var liste = ['+', '/', '*'];
$scope.add = function (ope) {
// don't add to expression, just store into der
var der = String(ope);
var avantDer = $scope.expression[$scope.expression.length - 1];
if ($scope.expression.length > 0 && liste.includes(der) && liste.includes(avantDer)) {
alert("error");
} else {
$scope.expression += der;
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<button ng-click="add('+')">+</button>
<button ng-click="add('*')">*</button>
<button ng-click="add('/')">/</button>
</div>
<div>
<button ng-click="add('1')">1</button>
<button ng-click="add('2')">2</button>
<button ng-click="add('3')">3</button>
</div>
{{expression}}
</div>
There were two things wrong.
$scope.expression.length > 3 should have been
$scope.expression.length > 2
You were calling $scope.expression += String(ope); twice
I made a minor change below so I could run it in the code snippet window.
I also added subtraction to liste.
var $scope = {
expression: ""
};
var liste = ['+', '/', '*', '-'];
debugger
$scope.add = function (ope) {
var temp = $scope.expression + String(ope);
console.log(temp);
var len = temp.length - 1;
if (len > 1) {
var der = temp[len];
var avantDer = temp[len - 1];
if (liste.includes(der) && liste.includes(avantDer)) {
console.log("error");
} else {
$scope.expression = temp;
}
}
else {
$scope.expression = temp;
}
};
$scope.add('3');
$scope.add('+');
$scope.add('-');
When I call $scope.add('-'); it displays the error like you expect.
Related
Statement:
I am new to RegExp and trying to learn capture groups in javascripts
I am using https://regex101.com/r/COYhIc/1 for testing
see attached image for character pos column of each match by https://regex101.com
Objective:
I want to print all matches and groups at console (Done)
I want to print character position of each match [see image](remaining)
JSFIDDLE: https://jsfiddle.net/bababalcksheep/p28fmdk4/68/
JavaScript:
function parseQuery(query) {
var isRE = query.match(/^\/(.*)\/([a-z]*)$/);
if (isRE) {
try {
query = new RegExp(isRE[1], isRE[2]);
} catch (e) {}
}
return query;
}
var str = $('#str').val();
var regex = parseQuery($('#reg').val());
//
var result;
var match_no = 0;
var output = '';
while ((result = regex.exec(str)) !== null) {
match_no++;
output += `\nMatch ${match_no}\n`;
output += `Full Match, ${ result[0]} , Pos\n`;
for (i = 1; i < result.length; i++) {
output += `Group ${i}, ${ result[i]} , Pos\n`;
}
}
console.log(output);
In your output field use index and lastIndex. exec returns an object with a index property.
output += `Full Match, ${ result[0]} , Pos ${result.index} - ${regex.lastIndex}\n `;
Update for the groups:
I have used a small logic to get the indices:
var m = new RegExp(result[i]);
output += `Group ${i}, ${ result[i]}, Pos ${$('#str').val().match(m).index} - ${regex.lastIndex} \n`;
function parseQuery(query) {
var isRE = query.match(/^\/(.*)\/([a-z]*)$/);
if (isRE) {
try {
query = new RegExp(isRE[1], isRE[2]);
} catch (e) {}
}
return query;
}
var str = $('#str').val();
var regex = parseQuery($('#reg').val());
//
var result;
var match_no = 0;
var output = '';
while ((result = regex.exec(str)) !== null) {
match_no++;
output += `\nMatch ${match_no}\n`;
output += `Full Match, ${ result[0]} , Pos ${result.index} - ${regex.lastIndex}\n `;
for (i = 1; i < result.length; i++) {
var m = new RegExp(result[i]);
output += `Group ${i}, ${ result[i]}, Pos ${$('#str').val().match(m).index} - ${regex.lastIndex} \n`;
}
}
console.log(output);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="form-group">
<label for="str">String:</label>
<input type="text" class="form-control" id="str" value="source=100, delta=2, source=2121, delta=5">
</div>
<div class="form-group">
<label for="regex">Regex:</label>
<input type="text" class="form-control" id="reg" value="/(source=(\d+))/g">
</div>
<div id="result">
</div>
</div>
FIDDLE
According to docs RegExp.exec, you can retrieve it using index property. So I would add this line into your snippet to retrieve column position for your full match:
`${result.index}-${result.index + result[0].length}`
For subgroups, JS doesn't retrieve index, so a workaround can be achieved using indexOf:
const initialSubGroupIndex = str.indexOf(result[i], result.index);
`${initialSubGroupIndex}-${initialSubGroupIndex + result[i].length}`
I'm facing a need to display a sum of values (related to $scope variables) depending on the selection of flags. For instance:
There are 4 $scope variables (e.g. $scope.Var_1, $scope.Var_2...) containing integer values,
There are 4 $scope variables (e.g. $scope.Var_1_Flag, $scope.Var_2_Flag...)containing true or false for each of the above integer variables.
So, in we have:
$scope.Var_1 = 1 ;
$scope.Var_2 = 2 ;
$scope.Var_3 = 3 ;
$scope.Var_4 = 4 ;
$scope.Var_1_Flag = true ;
$scope.Var_2_Flag = true ;
$scope.Var_3_Flag = true ;
$scope.Var_4_Flag = true ;
then 10 will be displayed, but if:
$scope.Var_1_Flag = true ;
$scope.Var_2_Flag = false;
$scope.Var_3_Flag = false;
$scope.Var_4_Flag = true ;
then 5 will be displayed.
Does AngularJS supports a binding syntax that would realize this?
Thanks.
MARKUP:
<div ng-controller="MyCtrl">
<input type="checkbox" ng-model="Var_1_Flag" ng-checked="Var_1_Flag" ng-change="changeStatus(Var_1_Flag);" />
<input type="checkbox" ng-model="Var_2_Flag" ng-checked="Var_2_Flag" ng-change="changeStatus(Var_2_Flag);" />
<input type="checkbox" ng-model="Var_3_Flag" ng-checked="Var_3_Flag" ng-change="changeStatus(Var_3_Flag);" />
<input type="checkbox" ng-model="Var_4_Flag" ng-checked="Var_4_Flag" ng-change="changeStatus(Var_4_Flag);" />
<br/> Sum is: {{sum}}
</div>
JS:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.sum = 0;
$scope.Var_1 = 1;
$scope.Var_2 = 2;
$scope.Var_3 = 3;
$scope.Var_4 = 4;
$scope.Var_1_Flag = true;
$scope.Var_2_Flag = false;
$scope.Var_3_Flag = false;
$scope.Var_4_Flag = true;
$scope.changeStatus = function(checkValue) {
$scope.checkValue = !checkValue;
$scope.calculateSum();
}
$scope.calculateSum = function() {
$scope.sum = ($scope.Var_1_Flag ? $scope.Var_1 : 0) + ($scope.Var_2_Flag ? $scope.Var_2 : 0) + ($scope.Var_3_Flag ? $scope.Var_3 : 0) + ($scope.Var_4_Flag ? $scope.Var_4 : 0)
}
$scope.calculateSum();
}
Check this http://jsfiddle.net/ananyaojha/ADukg/13641/
// Need to keep track of watcher
$scope.$watch('Var_1_Flag', function(newVal, oldVal){
// this callback is invoked if any change is detected in the value of Var_1_Flag
// add condition and update scope using $apply or $evalAsync
// You have to set watchers also whenever flags are keep getting changed for all falg types.
})
you will have to watch the scope variables
$scope.$watch('Var_1_Flag', function(newVal, oldVal){
// this callback is invoked if any change is detected in the value of Var_1_Flag
// add condition and update scope using $apply or $evalAsync
})
you could set up more watchers or add all the flag variables into a object and then watch the object so you don't have to use a different callback for each scope variable
Create an Array of Objects with value and flag propeties. And create filter to check the flag and sum of only those values.
$scope.sumArray = [
{value:1,flag:true},
{value:2,flag:false},
{value:3,flag:false},
{value:4,flag:true}
];
You could instead assign the function the the $scope.variable..makes it more easier..hope this is what you are looking for
angular.module('myApp', [])
.controller('MainCtrl', function($scope) {
$scope.Var_1_Flag = true;
$scope.Var_2_Flag = false;
$scope.Var_3_Flag = true;
$scope.Var_4_Flag = true;
$scope.var_1 = function() {
if ($scope.Var_1_Flag) {
return 1;
} else {
return 0;
}
}
$scope.var_2 = function() {
if ($scope.Var_2_Flag) {
return 2;
} else {
return 0;
}
}
});
<body ng-app="myApp" ng-controller="MainCtrl">
<div>
<span>{{var_1() + var_2()}} </span>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
In your controller :
$scope.sumValues =0;
var Values =[
{v:1,f:true},
{v:2,f:false},
{v:3,f:false},
{v:4,f:true}];
Values.forEach(function(element) {
if(element.f)
$scope.sumValues += element.v;
});
and in your HTML :
<div ng-controller="MyCtrl">
{{sumValues}}
</div>
I create an example for you :
http://jsfiddle.net/ADukg/13643/
$scope.sumArray = [
{value:1,flag:true},
{value:2,flag:false},
{value:3,flag:false},
{value:4,flag:true}
];
function sum(){
$scope.sum =0;
for(var i=0;i<$scope.sumArray.length;i++){
$scope.sum = $scope.sum +
$scope.sumArray[i].flag ? $scope.sumArray[i].value: 0
}
}
$scope.$watch('$scope.sumArray', sum,true);
or :
you can use $filter
function sum(){
$scope.sum=0;
var filtered = $filter('filter')($scope.sumArray,'flag');
for(var i=0;i<filtered.length;i++){
$scope.sum = $scope.sum+filtered[i].value;
}
}
You just need One $watch to update the values of sum. Watch all the flags together and whenever the checkbox(flag) changes, the sum will automatically update.
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller("MyCtrl", function($scope) {
$scope.sum = 0;
$scope.Var_1 = 1;
$scope.Var_2 = 2;
$scope.Var_3 = 3;
$scope.Var_4 = 4;
$scope.Var_1_Flag = true;
$scope.Var_2_Flag = false;
$scope.Var_3_Flag = false;
$scope.Var_4_Flag = true;
$scope.$watch('Var_1_Flag + Var_2_Flag + Var_3_Flag +Var_4_Flag', function(val) {
$scope.sum = ($scope.Var_1_Flag ? $scope.Var_1 : 0) + ($scope.Var_2_Flag ? $scope.Var_2 :
0) + ($scope.Var_3_Flag ? $scope.Var_3 : 0) + ($scope.Var_4_Flag ? $scope.Var_4 :
0);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<h6>
CheckBoxes
</h6>
<input type="checkbox" ng-model="Var_1_Flag">
<input type="checkbox" ng-model="Var_2_Flag">
<input type="checkbox" ng-model="Var_3_Flag">
<input type="checkbox" ng-model="Var_4_Flag">
<h6>
Sum
</h6> {{sum}}
</div>
I found an amazingly simple solution that does the job exactly as I wanted.
Here is a piece of code within the controller:
$scope.Test_1_Value = 1 ;
$scope.Test_1_Flag = true ;
$scope.Test_2_Value = 2 ;
$scope.Test_2_Flag = true ;
$scope.Test_3_Value = 3 ;
$scope.Test_3_Flag = true ;
$scope.Test_4_Value = 4 ;
$scope.Test_4_Flag = true ;
$scope.ConditionalAdd = function (p1,p2,p3,p4) {
var aaa = 0 ;
if ($scope.Test_1_Flag) {aaa = aaa + $scope.Test_1_Value }
if ($scope.Test_2_Flag) {aaa = aaa + $scope.Test_2_Value }
if ($scope.Test_3_Flag) {aaa = aaa + $scope.Test_3_Value }
if ($scope.Test_4_Flag) {aaa = aaa + $scope.Test_4_Value }
return aaa ;
}
and here the HTML part:
<input type="checkbox" ng-model="Test_1_Flag"> Add 1
<br>
<input type="checkbox" ng-model="Test_2_Flag"> Add 2
<br>
<input type="checkbox" ng-model="Test_3_Flag"> Add 3
<br>
<input type="checkbox" ng-model="Test_4_Flag"> Add 4
<br>
<label>Total 1: </label> {{ConditionalAdd(Test_1_Value,Test_2_Value,Test_3_Value,Test_4_Value)}}
As the checkboxes are changed (checked/unchecked), the result shown next to Total 1: is updated automatically, as needed.
The values Test_x_Value are part of the data generated for the creation and population of the table (using ng-repeat), and hence are available within each single cell of the table.
So, no filters, no watches.
Thanks to every one for your support :-).
EDIT:
I just finished implementing this solution and tested it with a table containing over 2,500 cells. This solution works perfectly well, including performance.
This is the code I have so far. When the user enters a word into the input box, I want that word to be stored in an array via the Add Word button. Once a number of words have been entered, the user clicks the Process Word button and I want all the words in the array to appear. How would I do this? Also could someone also explain why when nothing is entered into the input box "field is empty" does not appear?
function begin() {
var word = "List of words";
var i = returnword.length
if (userinput.length === 0) {
word = "Field is empty"
}
document.getElementById('message2').innerHTML = word
while (i--) {
document.getElementById('message').innerHTML = returnword[i] + "<br/>" + document.getElementById('message').innerHTML;
}
}
function addword() {
var arrword = [];
returnword = document.getElementById('userinput').value;
arrword.push(returnword);
}
Addword()
Your function contains an array arrword. If you keep it inside your function it will be reset every time you call the function. You need to keep your array of words outside the function
Empty input
The empty input message should be shown when you click on the Add word button. Check the input and display a message if needed
Display word
You can simply use join() to display you array
var arrayOfWord = [];
var inputElement = document.getElementById('userinput');
var errorElement = document.getElementById('error');
var wordsElement = document.getElementById('words');
function addWord() {
errorElement.innerHTML = "";
var word = inputElement.value;
if (word.trim() === "")
errorElement.innerHTML = "Empty input";
else
arrayOfWord.push(word);
inputElement.value = "";
}
function process(){
words.innerHTML = arrayOfWord.join(' - ');
}
#error {
color: tomato;
}
#words {
color: purple;
}
Enter a word <input id="userinput" /><button onclick="addWord()">Add word</button>
<div id="error"></div>
<button onclick="process()">Process</button>
<div id="words"></div>
you can do something a bit clearer with jQuery! :)
if you handle the input with jquery you can write something like:
var arrWord = [] // your array
/* Attaching a click handler on your "Add Word" button that will
execute the function on user click */
$("#addWordButtonID").on("click", function () {
var wordTyped = $('#textInputID').val() // your var that collect userInput
if (wordTyped.length != 0) { // your if statement with length === 0 condition
arrWord.push(wordTyped) // adding word typed to the array
}
})
to add jquery to your html page, just add
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
in your html header
Hopefully you already have the right html. Then you can modify your script like below:
<script>
var arrword = [];
var returnword;
function begin() {
var word = "List of words";
var i = arrword.length;
if (arrword.length === 0) {
word = "Field is empty";
}
document.getElementById('message2').innerHTML = word;
while (i--) {
document.getElementById('message').innerHTML = arrword[i] + "<br/>" + document.getElementById('message').innerHTML;
}
}
function addword() {
returnword = document.getElementById('userinput').value;
arrword.push(returnword);
}
</script>
var arrword = [];
var returnword;
function begin() {
var word = "List of words";
var i = arrword.length;
if (arrword.length === 0) {
word = "Field is empty";
}
document.getElementById('message2').innerHTML = word;
while (i--) {
document.getElementById('message').innerHTML = arrword[i] + "<br/>" + document.getElementById('message').innerHTML;
}
}
function addword() {
returnword = document.getElementById('userinput').value;
arrword.push(returnword);
}
<button id="addWord" onclick="addword()">Add Word</button>
<button id="processWords" onclick="begin()">ProcessWords</button>
<input type="text" id="userinput" value=" " />
<div id="message2">
</div>
<div id="message">
</div>
There is a forEach in my function for create Object:
Please Run code snippet:
angular.module('myApp', []).controller('myCntl', function($scope) {
$scope.t = '';
var input = "a,b,c,d,e,r \n1,1,1,1,1,1\n2,2,2,2,2,1 \n3,3,3,3,3,1";
var rows = input.split('\n');
var result = {
header: [],
body: []
};
//Get Header
var headerString = rows[0].split(',');
headerString.forEach(function(val) {
result.header.push(val);
});
rows.splice(0, 1);
rows.splice(rows.length - 1, rows.length); //delete "" row, from end array
// Get Body 'a,b,c,d,...'
rows.forEach(function(val, i) {
var bodyString = val.split(',');
var objBody = new Object;
bodyString.forEach(function(val, i) {
var strHeader = result.header[i];
objBody[strHeader] = val;
});
result.body.push(objBody);
});
$scope.result = result.body;
$scope.show = function() {
console.log($scope.result)
$scope.t = $scope.result;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" ng-app="myApp" ng-controller="myCntl">
<button ng-click="show()">click me</button>
<span ng-repeat="item in t">
{{item}}
</span>
</div>
And, this is objBody after forEach:
objBody = {
a: "1",
b: "1",
"c": "1"
}
Now, my problem is in key with double qoutation in last record of objBody.
What is it? and Why?! > ("c")
The problem was arising due to the white space between r and \n in the input string. When you split the string by \n, the rows[0] will be "a,b,c,d,e,r ". And after you split it with comma, then the last element will contain the white space like this "r ".
So just change the following line of code
var input = "a,b,c,d,e,r \n1,1,1,1,1,1\n2,2,2,2,2,1 \n3,3,3,3,3,1";
to
var input = "a,b,c,d,e,r\n1,1,1,1,1,1\n2,2,2,2,2,1\n3,3,3,3,3,1";
to fix the issue.
angular.module('myApp', []).controller('myCntl', function($scope) {
$scope.t = '';
var input = "a,b,c,d,e,r \n1,1,1,1,1,1 \n2,2,2,2,2,1 \n3,3,3,3,3,1";
input = input.replace(" ","");
console.log(input);
var rows = input.split('\n');
var result = {
header: [],
body: []
};
//Get Header
var headerString = rows[0].split(',');
headerString.forEach(function(val) {
result.header.push(val);
});
rows.splice(0, 1);
rows.splice(rows.length - 1, rows.length); //delete "" row, from end array
// Get Body 'a,b,c,d,...'
rows.forEach(function(val, i) {
var bodyString = val.split(',');
var objBody = new Object;
bodyString.forEach(function(val, i) {
var strHeader = result.header[i];
objBody[strHeader] = val;
});
result.body.push(objBody);
});
$scope.result = result.body;
$scope.show = function() {
console.log($scope.result)
$scope.t = $scope.result;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" ng-app="myApp" ng-controller="myCntl">
<button ng-click="show()">click me</button>
<span ng-repeat="item in t">
{{item}}
</span>
</div>
EDIT: You have found some answer. But my way for removing white spaces from the dynamic input string would be
input = input.replace(" ","");
I solved problem with split by regexExp:
var myRegex = new RegExp(/\s*\n/);
var rows = input.split(myRegex);
This command split every ' \n' in string. This work for me.
I am trying to call a function in this javascript code. My code needs to check for whether the user selects var num, var letters and var symbols to be true or false. In the code, I preset the values but I still search the object choices for the variables that are true and push it into the array choices_made. However, since I need to randomly choose the order in which the num, letters and symbols appear, I randomly choose the class based on the Math.random(). However, it doesn't show me the alert(jumbled_result) afterwards.
http://jsfiddle.net/bdaxtv2g/1/
HTML
<input id="num" type="text" placeholder="Enter desired length">
<br/><br/>
<input id="press" type="button" value="jumble it up">
JS
$(document).ready(function(){
var fns={};
$('#press').click(function(){
var length = parseInt($('#num').val());
var num = true;
var letters = true;
var symbols = false;
gen(length, num, letters, symbols);
});
function gen(len, num, letters, sym){
var choices = {
1:num,
2:letters,
3:sym
};
var choice_made = ['0'];
var choice = 0;
var jumbled_result = '';
for(x in choices){
if(choices[x]==true){
choice_made.push(x);
}
}
for(i=0;i<len;i++){
var funName = 'choice';
choice = Math.round(Math.random() * (choice_made.length-1));
funName += choice_made[choice];
jumbled_result = fns[funName](jumbled_result);
}
alert(jumbled_result);
}
fns.choice0 = function choice0(jumbled_result){
var numbers = '0123456789';
return jumbled_result += numbers.charAt(Math.round(Math.random() * numbers.length));
}
fns.choice1 = function choice1(jumbled_result) {
var alpha = 'abcdefghijklmnopqrstuvwxyz';
return jumbled_result += alpha.charAt(Math.round(Math.random() * alpha.length));
}
});
You never declare functions within document.ready of jQuery. The functions should be declared during the first run(unless in special cases).
Here is a working code made out of your code. What I have done is just removed your functions out of document.ready event.
$(document).ready(function() {
$('#press').click(function() {
var length = parseInt($('#num').val());
var num = true;
var letters = true;
var symbols = false;
gen(length, num, letters, symbols);
});
});
var fns = {};
function gen(len, num, letters, sym) {
var choices = {
1: num,
2: letters,
3: sym
};
var choice_made = ['0'];
var choice = 0;
var jumbled_result = '';
for (x in choices) {
if (choices[x] == true) {
choice_made.push(x);
}
}
for (i = 0; i < len; i++) {
var funName = 'choice';
choice = Math.round(Math.random() * (choice_made.length - 1));
funName += choice_made[choice];
jumbled_result = fns[funName](jumbled_result);
}
alert(jumbled_result);
}
fns.choice0 = function choice0(jumbled_result) {
var numbers = '0123456789';
return jumbled_result += numbers.charAt(Math.round(Math.random() * numbers.length));
}
fns.choice1 = function choice1(jumbled_result) {
var alpha = 'abcdefghijklmnopqrstuvwxyz';
return jumbled_result += alpha.charAt(Math.round(Math.random() * alpha.length));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="num" type="text" placeholder="Enter desired length">
<br/>
<br/>
<input id="press" type="button" value="jumble it up">
Its because of the way the object choices have been intitialized.. Try this..
var choices = {
0:num,
1:letters,
2:sym
};
And also
var choice_made = [];
JS fiddle link : http://jsfiddle.net/8dw7nvr7/2/