Basically I have 5 words picked out of an array (English Words) And I pick 1 French word out of another array which the user then has to guess what that french word means in english.
At the moment I am adding the Correct English Answer to the end of the select menu because I don't know how to add it inbetween the others randomly, or more so to shuffle the select menus options
I Have added my JSfiddle below, It is an exact replica. You will realise that the bottom option is always correct! (The user will begin to know the pattern). I've also had to add my javascript below to be able to post the JSfiddle
http://jsfiddle.net/jamesw1/w8p7b6p3/5/
var
RanNumbers = new Array(6),
foreignWords = ['un', 'deux', 'trois', 'quatre', 'cinq', 'six', 'sept', 'huit', 'neuf', 'dix', 'onze', 'douze', 'treize', 'quatorze', 'quinze', 'seize', 'dix-sept', 'dix-huit', 'dix-neuf', 'vingt', 'vingt et un', 'vingt-deux', 'vingt-trois', 'vingt-quatre', 'vingt-cinq', 'vingt-six', 'vingt-sept', 'vingt-huit', 'vingt-neuf', 'trente'],
translate = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen', 'twenty', 'twenty-one', 'twenty-two', 'twenty-three', 'twenty-four', 'twenty-five', 'twenty-six', 'twenty-seven', 'twenty-eight', 'twenty-nine', 'thirty'],
number = Math.floor((Math.random() * 30)),
output = '',
correctAns = translate[number];
//Generate random numbers to pick the available answers
function wordGen() {
for (var h = 0; h < RanNumbers.length; h++) {
var temp = 0;
do {
temp = Math.floor(Math.random() * 30);
} while (RanNumbers.indexOf(temp) > -1);
RanNumbers[h] = temp;
}
}
//Call the previous function
wordGen();
//Create dynamic select menu
document.getElementById('generatedWord').textContent = foreignWords[number];
var guess = "<select name='guesses' id='guesses'>";
for (var i = 0; i < 6; i++) {
guess += "<option value='" + i + "'>" + translate[RanNumbers[i]] + "</option>";
}
guess += '<option value="6">' + correctAns + '</option>';
guess += "</select>";
document.getElementById('output').innerHTML = guess;
numGuessed = document.getElementById('guesses').value;
function arrayValueIndex(arr, val) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === val) {
return i;
}
}
return false;
}
var numGames = 5;
var numGuesses = 1;
var correct = 0;
var wrong = 0;
var prevNumber;
//On click, gather correct and wrong answers, create new numbers, create new options, create new word.
document.getElementById('submitAns').onclick = function () {
prevNumber = number;
number = Math.floor((Math.random() * 30)),
output = '',
correctAns = translate[number];
document.getElementById('numGuess').innerHTML = "Question #" + numGuesses;
var
genWord = document.getElementById('generatedWord').textContent,
select = document.getElementById('guesses'),
selectedText = select.options[select.selectedIndex].text;
prevNumber === arrayValueIndex(translate, selectedText) ? correct++ : wrong++;
//Re doing the function, getting new values...
function wordGen() {
for (var j = 0; j < RanNumbers.length; j++) {
var temp = 0;
do {
temp = Math.floor(Math.random() * 30);
} while (RanNumbers.indexOf(temp) > -1);
RanNumbers[j] = temp;
}
}
//Call the previous function
wordGen();
//Create dynamic select menu
document.getElementById('generatedWord').textContent = foreignWords[number];
var guess = "<select name='guesses' id='guesses'>";
for (var i = 1; i <= 6; i++) {
guess += "<option value='" + i + "'>" + translate[RanNumbers[i]] + "</option>";
}
guess += '<option value="6">' + correctAns + '</option>';
guess += "</select>";
document.getElementById('output').innerHTML = guess;
numGuessed = document.getElementById('guesses').value;
function arrayValueIndex(arr, val) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === val) {
return i;
}
}
return false;
}
//Checking of the answers below, Accumilating correct and wrong answer.
numGuesses++;
if (numGuesses == 6) {
document.getElementById('generatedWord').innerHTML = "<span style='font-size:12px;color:red';>Please click for a new game when ready!</span><br /><p>You got " + wrong + " questions wrong " + "<br />You got " + correct + " questions correct";
$('#submitAns').hide();
}
};
You should use Math.random method, it would be something like this:
var correctAnswerIndex = Math.floor(Math.random() * 7); //gives random number between 0-6
for (var i = 1; i <= 6; i++) {
if(i == correctAnswerIndex)
guess += '<option value="'+i+'">' + correctAns + '</option>';
else
guess += "<option value='" + i + "'>" + translate[RanNumbers[i]] + "</option>";
}
you will need just to adjust else statement, as RanNumbers may not have 6 items. So maybe to introduce additional counter that would be used insead of i. (something like translate[RanNumbers[counter++]])
Related
I need to assign instances of my object as values in my array, but when I try to add let to my loop for collecting user input, I get an error stating that "[" is an unexpected token. This is a new technique to me so I'm not sure if this is even a practical method for making a table. Any help is appreciated.
<script>
function generateTable() {
var tblStart = "<table>";
//This is the header line for my table.
var tblMeat = "<tr> <td><b>Name</b></td> <td><b>Attendance</b></td> <td><b>Homework</b></td> <td><b>Midterm</b></td> <td><b>Final</b></td> <td><b>Course Grade</b></td> <td><b>Round Grade</b></td> <td><b>Letter Grade</b></td> </tr>";
var tblStop = "</table>";
//This determines the number of rows.
var rowCount = prompt("How many students are in the class?");
//I want to assign instances of Student to this array which will be used to fill the table cells.
var pupil = [NUMBER(rowCount)];
//This object should process user entries and use them to calculate the total grade, rounded grade, and letter grade.
function Student(name, attendance, homework, mGrade, fGrade) {
this.name = name;
this.attend = attendance;
this.homewrk = homework;
this.midter = mGrade;
this.fingrad = fGrade;
this.course = function () {
var attGrade = this.attend * 0.1;
var hwkGrade = this.homewrk * 0.2;
var midGrade = this.midter * 0.3;
var finGrade = this.fingrad * 0.4;
var combGrade = attGrade + hwkGrade + midGrade + finGrade;
return combGrade.toFixed(2);
};
this.round = Math.round(this.course);
this.letter = function() {
if(this.course < 60) {
return '<p style="color:red;">F</p>';
} else if(this.course >= 60 && this.course <= 69.9){
return "D";
} else if(this.course >= 70 && this.course <= 79.9) {
return "C";
} else if(this.course >= 80 && this.course <= 89.9) {
return "B";
} else if(this.course >= 90 && this.course <= 100) {
return "A";
};
};
}
/*This loop should collect user input based on the declared number of students, and assign input values to instances of
Student based on which execution of the loop is being run. I am getting an error stating "[" is unexpected for line 79.
*/
for (var r = 0; r < rowCount; r++) {
var studentN = prompt("Enter student name.");
var studentA = prompt("Enter student attendance.");
var studentH = prompt("Enter student homework grade.");
var studentM = prompt("Enter student midterm grade.");
var studentF = prompt("Enter student final grade.");
let pupil[r] = new Student(studentN, studentA, studentH, studentM, studentF);
}
for(var i = 0; i < rowCount; i++) {
tblMeat += "<tr>";
for(var j = 0; j < 8; j++) {
tblMeat += "<td>" + pupil[i].name + "</td><td>" + pupil[i].attend + "</td><td>" + pupil[i].homewrk + "</td><td>" + pupil[i].midter + "</td><td>" + pupil[i].fingrad + "</td><td>" + pupil[i].course() + "</td><td>" + pupil[i].round + "</td><td>" + pupil[i].letter() + "</td>";
}
tblMeat += "</tr>";
}
//This just puts it all together.
var completeTable = tblStart + tblMeat + tblStop;
document.getElementById("placetable").innerHTML = completeTable;
}
</script>
I ran your program through uglifyJS. It's actually for compressing javascript code, but when there is a lot of code to debug, it's a life changer.
The script told me:
Parse error: Unexpected token: punc ([)
Line 59, column 16
let pupil[r] = new Student(studentN, studentA, studentH, studentM, studentF);
You're trying to define an already existing variable. Remove "let".
A tiny advice for the future.
Listing last five items in an array by using this code below worked so far, but when the array length was only 1 it started causing issues. Can I some how condition it so it doesn't cycle though when there is only one item in the array?
$(function() {
$.getJSON("#myURL", function(getStressTestErrorInfo2) {
if (getStressTestErrorInfo2.length >= 1) {
var len = getStressTestErrorInfo2.length - 5;
var data = getStressTestErrorInfo2;
var txt = "";
if (data.length - 1 !== undefined) {
for (var i = len; i < len + 5; i++) {
// dynamically generating a table-row for appending in the table.
txt += "<tr><td>" + data[i].AlarmNo + "</td><td>" + data[i].AlarmCnt + "</td><td>" + data[i].StresstestId + "</td><td>" + data[i].StresstestRunId + "</td><td>" + data[i].Name + "</td><td>" + data[i].StackTrace + "</td><td>" + data[i].Timestamp + "</td></tr>";
}
if (txt != "") {
// #table is the selector for the table element in the html
$("#listErrorsTest2").append(txt);
}
}
};
});
});
Change this line:
if (getStressTestErrorInfo2.length >= 1) {
to:
if (getStressTestErrorInfo2.length >= 5) {
This way, it wont start the function, if the length is lower then 5.
The issues you have is that no matter the size of the array, you take the size and substract 5 to it. Allowing you to take the last 5 cells of an array ... long enough. If the length is below 5, the index will be negative.
Now, you can't simply update the condition if you want to get the values of smaller arrays.
You can simply set the index to 0 if it is negative :
var len = getStressTestErrorInfo2.length - 5;
if (len < 0) len = 0; //Array with less than 5 values.
And loop until you reach the end
while(len < getStressTestErrorInfo2.length){ ... }
My approach at the begging had some (stupid) flaws. Instead of showing the last 5 items I reversed the array and listed first five and added the condition
if (len > 5) len = 5;
so it did the trick.
$(function() {
$.getJSON("#myURL", function(getStressTestErrorInfo0) {
if (getStressTestErrorInfo0.length >= 1) {
var data = getStressTestErrorInfo0;
/*Function to reverse the array*/
function reverseArr(input) {
var ret = new Array;
for (var i = input.length - 1; i >= 0; i--) {
ret.push(input[i]);
}
return ret;
}
var reverseData = reverseArr(data);
var len = getStressTestErrorInfo0.length;
var data = getStressTestErrorInfo0;
var txt = "";
if (len > 0) {
if (len > 5) len = 5;
for (var i = 0; i < len; i++) {
// dynamically generating a table-row for appending in the table.
txt += "<tr><td>" + reverseData[i].AlarmNo + "</td><td>" + reverseData[i].AlarmCnt + "</td><td>" + reverseData[i].StresstestId + "</td><td>" + reverseData[i].StresstestRunId + "</td><td>" + reverseData[i].Name + "</td><td>" + reverseData[i].StackTrace + "</td><td>" + reverseData[i].Timestamp + "</td></tr>";
}
if (txt != "") {
//selector for the table element in the html
$("#listErrors").append(txt);
}
}
};
});
});
This is the code I currently have. I am having issues displaying the ordinals as I am not sure what for loop to put then in. Can someone please assist?
var bandsString = "";
var newBandString = "";
var bandsListArray = ["Linkin Park", "Atmosphere", "Rage Against The Machine", "Immortal Technique", "System of a Down"];
for (var i = 0; i < bandsListArray.length; i++) {
var currentBand = bandsListArray[i];
bandsString += "<li> My #" + [i + 1] + " band is " + currentBand + "</li>";
}
var bands = i;
if (bands == 0) {
bands = i + "st";;
} else if (bands == 1) {
bands = i + "nd";
} else if (bands == 2) {
bands = i + "rd";
} else if (bands == 3) {
bands = i + "th";
} else if (bands == 4) {
bands = i + "th";
} else {
}
for (var i = 0; i < bandsListArray.length; i++) {
var newBandList = bandsListArray[i];
newBandString += "<li>My # " + [i + 1] + " band is " + currentBand + "</li>";
}
document.write(bandsString);
document.write(newBandString);
I'm not exactly sure what you're trying to do, but does this help? Instead of manually working out how to put the correct ordinal suffix ('st', 'nd', 'rd', etc.) on the numbers, I googled a function.
The ordinal_suffix_of function works like this:
This first part is the start of the function. Hopefully this is self-explanatory. We're creating a function that accepts one parameter, that will be named i inside the function.
function ordinal_suffix_of(i) {
This next part defines j and k. You can declare multiple variables while only typing var once by using commas, as this code does:
var j = i % 10,
k = i % 100;
This would do exactly the same thing:
var j = i % 10;
var k = i % 100;
The percent sign (%) is called "modulus" and is a mathematical operator. What it does is divide the left operand by the right operand and returns the remainder. So in the case of j, it's being assigned remainder of dividing i by 10. If i was 14, for example, j would be 4. If i was 179, j would be 9. The same thing happens for k except that it's divided by 100 instead of 10.
What it's effectively doing is extracting the last 1 digit (for j) and the last 2 digits (for k) and then just checking (in the if statements) what ordinal suffixes they should have.
The reason for k is that you always want numbers ending in 1, 2, or 3 to have the suffixes st, nd , and rd except when the number ends in 11, 12, or 13, in which case it should get the suffix th. So for example, 112 should be 112th, and 313513 should be 313513th. k handles this by making it so that if the number ends in 11, 12, or 13 we only add th. Note that 11 % 100 will result in 11, so this works for 11, 12, and 13 as well.
var bandsString = "";
var newBandString = "";
var bandsListArray = ["Linkin Park", "Atmosphere", "Rage Against The Machine", "Immortal Technique", "System of a Down"];
for (var i = 0; i < bandsListArray.length; i++) {
var currentBand = bandsListArray[i];
bandsString += "<li> My #" + (i + 1) + " band is " + currentBand + "</li>";
}
for (var i = 0; i < bandsListArray.length; i++) {
var newBandList = bandsListArray[i];
newBandString += "<li>My " + ordinal_suffix_of(i + 1) + " band is " + newBandList + "</li>";
}
function ordinal_suffix_of(i) {
var j = i % 10,
k = i % 100;
if (j == 1 && k != 11) {
return i + "st";
}
if (j == 2 && k != 12) {
return i + "nd";
}
if (j == 3 && k != 13) {
return i + "rd";
}
return i + "th";
}
document.write(bandsString);
document.write(newBandString);
Try this, just make the code more simple
var bandsString = "";
var newBandString = "";
var bandsListArray = ["Linkin Park", "Atmosphere", "Rage Against The Machine", "Immortal Technique", "System of a Down"];
for (var i = 0; i < bandsListArray.length; i++) {
var currentBand = bandsListArray[i];
bandsString += "<li> My #" + [i + 1] + " band is " + currentBand + "</li>";
newBandString += "<li> My #" + numeric(i+1) + " band is " + currentBand + "</li>";
}
function numeric(i){
var bands = i+"th";
if (i == 1) {
bands = i + "st";;
} else if (i == 2) {
bands = i + "nd";
} else if (i == 3) {
bands = i + "rd";
}
return bands;
}
document.write(bandsString);
document.write(newBandString);
If this is what you are trying to achieve is:
My 2nd band is Atmosphere
Then this how you might achieve it
var bandsString = "";
var newBandString = "";
var bandsListArray = ["Linkin Park", "Atmosphere", "Rage Against The Machine", "Immortal Technique", "System of a Down"];
for (var i = 0; i < bandsListArray.length; i++) {
var currentBand = bandsListArray[i];
bandsString += "<li> My #" + (i + 1) + " band is " + currentBand + "</li>";
newBandString += "<li>My " + numberSuffix(i + 1) + " band is " + currentBand + "</li>";
}
function numberSuffix(number){
if(number % 10==1) return number+'st';
if(number % 10==2) return number+'nd';
if(number % 10==3) return number+'rd';
return number+'th';
}
document.write(bandsString);
document.write(newBandString);
I am been trying to create a html table that is populated by objects.
The table was supposed to be selectable by row (via hover), when the row was hovered over a function ran.
The table headers are in an array:
var topTitles = ["Type","Origin","Destination","T","A","G"];
all the data are sitting inside arrays,
var Type = [];
var Origin = [];
var Destination = [];
var T = [];
var A = [];
var G = [];
I tried to modify an example piece of code, but it was very difficult to conceptualize it and place it into a programatic solution. What is an easy way to map such data directly into a interactive table.
function createTable() {
var table = document.getElementById('matrix');
var tr = addRow(table);
for (var j = 0; j < 6; j++) {
var td = addElement(tr);
td.setAttribute("class", "headers");
td.appendChild(document.createTextNode(topTitles[j]));
}
for (var i = 0; i < origins.length; i++) {
var tr = addRow(table);
var td = addElement(tr);
td.setAttribute("class", "origin");
td.appendChild(document.createTextNode(mode[i]));
for (var j = 0; j < topTitles.length; j++) {
var td = addElement(tr, 'element-' + i + '-' + j);
td.onmouseover = getRouteFunction(i,j);
td.onclick = getRouteFunction(i,j);
}
}
}
function populateTable(rows) {
for (var i = 0; i < rows.length; i++) {
for (var j = 0; j < rows[i].elements.length; j++) {
var distance = rows[i].elements[j].distance.text;
var duration = rows[i].elements[j].duration.text;
var td = document.getElementById('element-' + i + '-' + j);
td.innerHTML = origins[i] + "<br/>" + destinations[j];
}
}
}
if (highlightedCell) {
highlightedCell.style.backgroundColor="#ffffff";
}
highlightedCell = document.getElementById('element-' + i + '-' + j);
highlightedCell.style.backgroundColor="#e0ffff";
showValues();
}
This is probably the easiest way I could think of building the table without changing your data structure and make it very clear where all the data is coming from. It is defiantly not the best code, but it should work for your situation.
CodePen
var topTitles = ["Type","Origin","Destination","T","A","G"];
var Type = ["Type1", "type2", "type3"];
var Origin = ["Origin1", "origin2", "origin3"];
var Destination = ["Destination1", "Destination2", "dest3"];
var T = ["t1", "t2","T3"];
var A = ["steaksauce", "a2", "a3"];
var G = ["G1", "G2", "G3"];
var appendString = [];
for(var i =0; i < topTitles.length; i++){
if(!i){
appendString.push("<tr><td>" + topTitles[i] + "</td>");
}
else if(i === topTitles.length -1){
appendString.push("<td>" + topTitles[i] + "</td></tr>");
}
else{
appendString.push("<td>" + topTitles[i] + "</td>");
}
}
for(var i =0; i < Type.length; i++){
appendString.push("<tr><td>" + Type[i] + "</td><td>" + Origin[i] + "</td><td>" + Destination[i] + "</td><td>" + T[i] + "</td><td>" + A[i] + "</td><td>" + G[i] + "</td></tr>");
}
var table = document.getElementById('table');
table.innerHTML = appendString.join('');
This question already has answers here:
How to randomize (shuffle) a JavaScript array?
(69 answers)
Closed 9 years ago.
I'm trying to randomize a standard loop function. Here's the original loop :
success: function(data) {
for (var i = 0; i < 15; i++) {
$("#myimages").append("<a href='" + data.data[i].link + "' target='_blank' style='float:center;width:300px; height:300px;'><img style='width:20%;' src='" + data.data[i].images.standard_resolution.url + "' /></a>");
}
}
Could anyone help me out. I've had no luck so far.
Here's a fiddle showing 15 numbers being randomized and then looped through: http://jsfiddle.net/pH6Lx/ .
function Shuffle(o) {
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
$(document).ready(function() {
//init array
var testArray = [];
//Fill it with 15 numbers
for(var i=0;i<15;i++)
testArray.push(i);
//Shuffle it ("randomize")
Shuffle(testArray);
//Do something with these numbers
for (var i=0;i<testArray.length;i++) {
$('#random').append(testArray[i]+'<br />');
}
});
In your case this might all happen inside your callback instead.
First, just randomize the array, see: How to randomize (shuffle) a JavaScript array?.
success: function(data) {
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
shuffleArray(data);
Then proceed as before:
for (var i = 0; i < 15; i++) {
$("#myimages").append("<a href='" + data.data[i].link + "' target='_blank' style='float:center;width:300px; height:300px;'><img style='width:20%;' src='" + data.data[i].images.standard_resolution.url + "' /></a>");
}
}
if you are passing a list of images in data.data is possible to do as below
success: function(data) {
var numberOfImages = Math.min( 15, data.data.length ) ; //bug free to don't repeat
var alreadyShow = {}; //to don't repeat
for (var i = 0; i < numberOfImages ; i++) {
do{
var imgIndex = Math.round( Math.random() * ( data.data.length - 1 ) );
}while( alreadyShow[imgIndex] );
alreadyShow[imgIndex] = true;
$("#myimages").append("<a href='" + data.data[imgIndex].link + "' target='_blank' style='float:center;width:300px; height:300px;'><img style='width:20%;' src='" + data.data[imgIndex].images.standard_resolution.url + "' /></a>");
}
}
it's randomize without repeat