I am using JavaScript/jQuery to random two list of arrays, one with the word and the other there definition.
I want each load to select 5 out of the available 10 in each array so that were I am running into issues.
I am able to randomize both arrays but I need both to output the same "random" result so they can match both sides.
var match1 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var match2 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
and is current output is something like
match1 = 2 5 7 8 3
match1 = 1 3 9 4 5
and I need somthing like this
match1 = 7 5 2 8 1
match1 = 7 5 2 8 1
I am new to JavaScript so sorry for the messy code.
function createQuizLayout() {
//this are the draggables (#leftCol)
var match1 = ["1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10"
];
//this are drop target (#rightCol)
var match2 = ["1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10"
];
function randomSort(min, max) {
return (parseInt(Math.random() * 10) % 2);
}
(match1.sort(randomSort));
(match2.sort(randomSort));
var arrMatch1 = [];
for (var i = 0; i < match1.length; i++) {
arrMatch1.push('<li data-index="' + (i + 1) + '">' + match1[i] + '</li>');
arrMatch1.length = arrMatch1.length < 5 ? arrMatch1.length : 5;
}
var arrMatch2 = [];
for (var i = 0; i < match2.length; i++) {
arrMatch2.push('<li data-index="' + (i + 1) + '">' + match2[i] + '</li>');
arrMatch2.length = arrMatch2.length < 5 ? arrMatch2.length : 5;
}
//shuffle the arrays
arrMatch1 = shuffle(arrMatch1);
arrMatch2 = shuffle(arrMatch2);
//insert them into DOM
$('#source').html(arrMatch1.join(''));
$('#target').html(arrMatch2.join(''));
}
function shuffle(v) {
for (var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
return v;
}
I'm pretty sure you missed the part How to shuffle the two arrays the right (same) way :)
Have a look at this code:
var match1 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var match2 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var i=0, len= match1.length, next, order=[];
while(i<len)order[i]= ++i;
order.sort(function(){return Math.random()-.5});
for(i=0; i<len; i++){
next=order[i];
match1.push(match1[next]);
match2.push(match2[next]);
}
match1.splice(1, len);
match2.splice(1, len);
console.log(match1)
console.log(match2)
To change your arrays in place, get the shuffled order first and add the new arrangements to the end of the existing array (match1).
Then splice out from index 1 splits the array into your two (same way shuffled) arrays with exactly the same length.
Related
in Javascript for example I have this array:
var ids = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
(The number of objects in the array changes constantly)
How could I get this result (a new array), and how can I separate it? for example in 3 (I probably need to make a loop for this)
var urls= ["example.com/?id0=1&id1=2&id2=3", "example.com/?id3=4&id4=5&id5=6", "example.com/?id6=7&id7=8&id8=9", "example.com/?id9=10"]
Thanks.
Use .map to add id to the ids and join the resulting array with &
var ids = ["10000000", "2000000", "1234567", "7654321", "7777777"];
var url = "example.com/?" + ids.map((id, ndx) => `id${ndx}=${id}`).join("&");
console.log(url);
EDIT
Based on the edited question, you can create function to split the array of ids into chunks and use the same code as before, map the chunks to add id and join them with &
var ids = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "xxx"];
const generateUrls = (ids, n = 3) => {
var i,
j,
temparray,
urls = [],
ndx = 0;
for (i = 0, j = ids.length; i < j; i += n) {
temparray =
"example.com/?" +
ids
.slice(i, i + n)
.map(id => `id${ndx++}=${id}`)
.join("&");
urls.push(temparray);
}
return urls;
};
const result = generateUrls(ids, 3);
console.log(result);
How would I take two arrays and with 20 elements each and display 5 at random. not the first 5 but 5 random ones. this is a drag and drop acitiby that I want to be able to redo hence the randomized selection.
I tried using something like match1.length = match1.length < 5 ? match1.length : 5; and it kinda worked but it would display the 5 correct one and the rest would show up as null blank spaces
var match1 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"];
//this are drop target (#rightCol)
var match2 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"];
This is what I am using to randomize the arrays
var i=0, len= match1.length, next, order=[];
while(i<len)order[i]= ++i;
order.sort(function(){return Math.random()+.5});
for(i=0; i<len; i++){
next=order[i];
match1.push('<li data-index="' + (i + 1) + '">' + match1[next]);
match2.push('<li data-index="' + (i + 1) + '">' + match2[next]);
}
match1.splice(1, len);
match2.splice(1, len);
but it display all 20 at once and I only want 5 at a time so it can be redone multiply times.
This is the rest of the code.
//shuffle the arrays
arrMatch1 = shuffle(match1);
arrMatch2 = shuffle(match2);
//insert them into DOM
$('#source').html(match1.join(''));
$('#target').html(match2.join(''));
}
function shuffle(v) {
for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
return v;
}
function initQuiz() {
$('#source li').draggable(
{
revert: true,
revertDuration: 600,
cursor: "all-scroll"
});
var totalScore = 0;
$('#score').text(totalScore + ' correct answer');
$('#target li').droppable(
{
accept : function(draggable)
{
if(parseInt(draggable.data('index'), 10) ===
parseInt($(this).data('index'), 10))
{
return true;
}
else
{
return false;
}
},
drop: function( event, ui )
{
var that = $(this);
that.addClass( "ui-state-highlight").html('Correct!');
that.droppable('disable');
ui.draggable.addClass('correct ui-state-active');
(ui.draggable).draggable('disable');
totalScore++;
$('#score').text(totalScore + ' matching answer');
if($('li.correct').length == 10)
{
$( "#dialog-complete" ).dialog({
resizable: false,
modal: true
});
}
}
});
}
I am totally new to javascript, but I can program in Java, C# etc. already.
I want to generate a card deck, and after that I want to access this array of cards.
function Card(rank, suit)
{
this.rank = rank;
this.suit = suit;
}
function Deck()
{
this.ranks = new Array("A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K");
this.suits = new Array("Hearts", "Clubs", "Diamonds", "Spades");
this.cards = Array(52);
this.makeDeck = function()
{
console.log("Executed MakeDeck!");
for(var i = 0; i < this.suits.length; i++)
{
for(var j = 0; j < this.ranks.length; j++)
{
this.cards.push(new Card(this.ranks[j],this.suits[i]));
}
}
}
}
function btnClick()
{
var deck = new Deck();
deck.makeDeck();
console.log(deck.cards[0]);
}
In the function "btnClick()" I want to log the first item in the array, but the console just tells my "undefined". I can't find my mistake, maybe you can help me?
The problem is that you have initialised an array with 52 elements... and you are then pushing more elements onto it.
What you need to do is just have this.cards = [];. JavaScript has variable-length arrays.
I got two arrays, both type string :
var correctAnswers = ["0", "1", "2", "3", "4", "5"];
and second :
var finalArray = ["0", "1", "4", "3", "5", "2"];
I would like to compare them and and if not match second with first to extract elements and push them in another array, like this :
finalArray = ["0", "1", "3"];
var toChange = ["4", "5", "2"];
You could use jQuery map method too:
var toChange = $.map(finalArray, function(v, k){
return correctAnswers[k] !== v ? v: null;
});
finalArray = $.map(finalArray, function(v, k){
return correctAnswers[k] === v ? v: null;
});
DEMO
Or using array.prototype.filter():
var toChange = finalArray.filter(function(v, k){
return correctAnswers[k] !== v;
});
finalArray = finalArray.filter(function(v, k){
return correctAnswers[k] === v;
});
filter DEMO
var toChange = [];
for (var i = finalArray.length - 1; i >= 0; i--) {
if (finalArray[i] !== correctAnswers[i]) {
toChange.push(finalArray[i]);
finalArray.splice(i, 1);
}
}
The key to this is iterating down from the length to 0, rather than up from 0 to the length as usual. This is because splice changes the indexes of all the elements after the element being removed, so normal iteration would skip an element after each splice.
This will do it:
http://jsfiddle.net/XiozZe/NkM6s/
var correctAnswers = ["0", "1", "2", "3", "4", "5"];
var finalArray = ["0", "1", "4", "3", "5", "2"];
var correctFinal = [];
var toChange = [];
for(var i = 0; i < correctAnswers.length; i++){
if(correctAnswers[i] === finalArray[i]){
correctFinal[correctFinal.length] = finalArray[i];
}
else{
toChange[toChange.length] = finalArray[i];
}
}
First you've got to define your variables
// Define your variables
var correctAnswers = ["0", "1", "2", "3", "4", "5"];
var answers = ["0", "1", "4", "3", "5", "2"];
var finalArray = [];
var toChange = [];
Then you create a loop, which loops over the Answers array.
// comparing them could be done with a simple loop
for (var i = 0; i<answers.length; i++) {
if (correctAnswers[i] == answers[i]) { //if they're equal, push the value into the final array
finalArray.push(answers[i]);
} else { // if not, push them into the toChange array
toChange.push(answers[i]);
}
}
This will give you toChange = [0, 1, 3]
If you want toChange = [0, 1] you've got to change it to
toChange = answers.slice(0);
for (var i = 0; i<correctAnswers.length; i++) {
if (correctAnswers[i] == Answers[i]) { //if they're equal, push the value into the final array and remove the first value from the toChange array
finalArray.push(Answers[i]);
toChange.shift();
} else { // if not, break
break;
}
}
Fiddle
I have an array like this in JS:
var a = ["1", "2", "1_10", "1_22", "2_12", "3", "14", "1_15", "3_31", "14_25", "2_18"];
and I need to sort it, in order to look like this:
["1", "1_10", "1_15", "1_22", "2", "2_12", "2_18", "3", "3_31", "14", "14_25"];
I tried using a function like the one in this fiddle http://jsfiddle.net/r7vQP/ but I am getting a wrong answer (["1", "14", "14_25", "1_10", "1_15", "1_22", "2", "2_12", "2_18", "3", "3_31"]).
Try this:
var b = a;
for (var i = 0; i < b.length; i++) {
b[i] = b[i].replace('_', '.');
}
b.sort(function (a, b) { return a - b });
for (var y = 0; y < b.length; y++) {
a[y] = b[y].replace('.', '_');
}
function numericSort(a, b) {
return a - b;
}
a.map(function (e) {
return parseFloat(e.replace("_", "."));
})
.sort(numericSort)
.map(function (e) {
return e.toString().replace(".", "_");
})
var a = ["1", "2", "1_10", "1_22", "2_12", "3", "14", "1_15", "3_31", "14_25", "2_18"];
function sortByFloat (a,b)
{
a=parseFloat (a.replace ("_","."));
b=parseFloat (b.replace ("_","."));
if (a<b) return -1;
if (a>b) return 1;
if (a==b) return 0;
}
a.sort (sortByFloat);
return a-b would be faster instead of the three if conditions
function to_dot(s) { return s.replace('_','.') }
function from_dot(n) { return n.replace('.','_') }
a.map(to_dot).sort(function(a,b){return a-b}).map(from_dot)
["1", "1_10", "1_15", "1_22", "2", "2_12", "2_18", "3", "3_31", "14", "14_25"]