This is my Code:
var pages = Math.ceil(allItems / itemsPerPage);
var pagesArray = [];
for(var i = 0; i < pages; i++){
pagesArray.push(i);
}
var show = 3;
var offset = pageCounter + show;
var showPages = pagesArray.slice(pageCounter, offset);
for(var h = 0; h < showPages.length; h++){
if(pageCounter == showPages[h]){
selectedPageClass = 'selected';
}else{
selectedPageClass = '';
}
$(".pagination").append("<a href='#' class='" + selectedPageClass +"'>" + showPages[h] + "</a>");
}
My Problem now is:
if I have this array ["1","2","3","4","5"]
First Step when I am on page "0" it should be :
1(selected) 2 3
this works. but than it goes on like this:
2(selected) 3 4
3(selected) 4 5
4(selected) 5
5(selected)
But what I want is this:
1(selected) 2 3
2(selected) 3 4
3(selected) 4 5
3 4(selected) 5
3 4 5(selected)
http://codepen.io/anon/pen/JbBYva
You can update the variables on the top, the pageCounter is 0-based.
//editable variables
var pages = 5;
var pageCounter = 0;
var show = 3;
//calculation
var pagesArray = [];
for(var i = 1; i <= pages; i++){
pagesArray.push(i);
}
var offset = pageCounter + show;
var showPages = pagesArray.slice(Math.min(pages - show, pageCounter), offset);
for(var h = 0; h < showPages.length; h++){
if(pageCounter + 1 == showPages[h]){
selectedPageClass = 'selected';
}else{
selectedPageClass = '';
}
$(".pagination").append("<a href='#' class='" + selectedPageClass +"'>" + showPages[h] + "</a>");
}
You should do your showPages like this:
var showPages = pagesArray.slice(Math.min(pageCounter, pages- show), offset);
See demo below:
var pages = 10,
pageCounter = 0;
var pagesArray = [];
for (var i = 0; i < pages; i++) {
pagesArray.push(i);
}
var show = 3;
function paginate() {
$(".pagination").empty();
var offset = pageCounter + show;
var showPages = pagesArray.slice(Math.min(pageCounter, pages - show), offset);
for (var h = 0; h < showPages.length; h++) {
if (pageCounter == showPages[h]) {
selectedPageClass = 'selected';
} else {
selectedPageClass = '';
}
$(".pagination").append("<a href='#' class='" + selectedPageClass + "'>" + showPages[h] + "</a>");
}
}
// initialize
paginate();
// turn pages
$('#counter').click(function() {
if (pageCounter >= pages)
return;
pageCounter++;
paginate();
});
// restart pagination
$('#restart').click(function() {
pageCounter = 0;
paginate();
});
.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pagination"></div>
<button id="counter">Turn a page</button>
<button id="restart">Restart</button>
Related
I like to show my titles of posts on a specific page. It is more effective to get know what author have written than scroll all pages or navigate using archive widget.
I found code (code is below) for generate list that sort post titles alphabetically but I like to show titles in chronological order. There is lot of code example about this but they are outdated. They doesn’t work anymore after some changes in blogger platform.
How to change code to get post titles in chronological order and in format YYYY.MM.DD ?
<div>
<ul id="postList12"></ul>
</div>
<script type="text/javascript">
var startIndex = 1;
var maxResults = 150;
var allResults = [];
function sendQuery12() {
var scpt = document.createElement("script");
scpt.src = "/feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function printArrayResults(root) {
//Sort Alphebetically
allResults.sort(function(a, b)
{
var a_string = a.children[0].textContent ;
var b_string = b.children[0].textContent ;
if(a_string < b_string) return -1;
if(a_string > b_string) return 1;
return 0;
})
var elmt = document.getElementById("postList12");
for (index = 0; index < allResults.length; index++) {
elmt.appendChild(allResults[index]);
}
}
function processPostList12(root) {
var elmt = document.getElementById("postList12");
if (!elmt)
return;
var feed = root.feed;
if (feed.entry.length > 0) {
for (var i = 0; i < feed.entry.length; i++) {
var entry = feed.entry[i];
var title = entry.title.$t;
var date = entry.published.$t
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel == "alternate") {
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0) {
var liE = document.createElement("li");
var a1E = document.createElement("a");
a1E.href = url;
a1E.textContent = title + " (" + date.substr(0,10) + ")";
liE.appendChild(a1E);
//elmt.appendChild(liE);
allResults.push(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults) {
startIndex += maxResults;
sendQuery12();
} else {
printArrayResults();
}
}
}
sendQuery12();
</script>
Code is copied from here: https://dansator.blogspot.fi/2015/10/general-alphabetical-list-of-posts.html
Remove sort method from the code. remove the following :
//Sort Alphebetically
allResults.sort(function(a, b){
var a_string = a.children[0].textContent ;
var b_string = b.children[0].textContent ;
if(a_string < b_string) return -1;
if(a_string > b_string) return 1;
return 0;
})
Your code should be
<div>
<ul id="postList12"></ul>
</div>
<script type="text/javascript">
var startIndex = 1;
var maxResults = 150;
var allResults = [];
function sendQuery12()
{
var scpt = document.createElement("script");
scpt.src = "/feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function printArrayResults(root)
{
var elmt = document.getElementById("postList12");
for (index = 0; index < allResults.length; index++) {
elmt.appendChild(allResults[index]);
}
}
function processPostList12(root)
{
var elmt = document.getElementById("postList12");
if (!elmt)
return;
var feed = root.feed;
if (feed.entry.length > 0)
{
for (var i = 0; i < feed.entry.length; i++)
{
var entry = feed.entry[i];
var title = entry.title.$t;
var date = entry.published.$t
for (var j = 0; j < entry.link.length; j++)
{
if (entry.link[j].rel == "alternate")
{
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0)
{
var liE = document.createElement("li");
var a1E = document.createElement("a");
a1E.href = url;
a1E.textContent = title + " (" + date.substr(0,10) + ")";
liE.appendChild(a1E);
//elmt.appendChild(liE);
allResults.push(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults)
{
startIndex += maxResults;
sendQuery12();
} else {
printArrayResults();
}
}
}
sendQuery12();
</script>
I wrote this code in my html site, in Javascript, but is not working right. Most times it seems to ignore some entries and just randomly selects which is the min/max value. Also, when I tried to calculate average values, I got a string instead of a number, even though the variable is declared as 0 in the beginning. e.g performing 0+1+1+2+3+5 = 011235 instead of 12.
Here is the code, thanks in advance.
**EDIT: I added the student average code in the end, but it doesn't work, it doesn't show any results on the page, not even the "student" + [i] part. On the other hand, the parseInt() command worked, and made everything work as it should, thank you :)
<script language = "javascript">
function myFunction() {
var course0 = [];
var course1 = [];
var course2 = [];
var minstugrade = 100;
var maxstugrade = 0;
var minstugradetext = "";
var maxstugradetext = "";
var stuavgarr = [];
var minstuavg = 100;
var maxstuavg = 0;
var minstuavgtext = "";
var maxstuavgtext = "";
var mincougrade = 100;
var maxcougrade = 0;
var mincougradetext = "";
var maxcougradetext = "";
var mincouavg = 100;
var maxcouavg = 0;
var mincouavgtext = "";
var maxcouavgtext = "";
var couavg = 0;
//add form items to array
var x = document.getElementById("course0");
var i;
for (i = 0; i < x.length ;i++) {
course0.push(parseInt(x.elements[i].value));
}
var x = document.getElementById("course1");
var i;
for (i = 0; i < x.length ;i++) {
course1.push(parseInt(x.elements[i].value));
}
var x = document.getElementById("course2");
var i;
for (i = 0; i < x.length ;i++) {
course2.push(parseInt(x.elements[i].value));
}
//calculate course & student min/max
for (i = 0; i < course0.length; i++) {
if (course0[i] < mincougrade) {
mincougrade = course0[i];
mincougradetext = "course0";
}
if (course0[i] > maxcougrade) {
maxcougrade = course0[i];
maxcougradetext = "course0";
}
if (course0[i] < minstugrade) {
minstugrade = course0[i];
minstugradetext = "student" + [i];
}
if (course0[i] > maxstugrade) {
maxstugrade = course0[i];
maxstugradetext = "student" + [i];
}
}
for (i = 0; i < course1.length; i++) {
if (course1[i] < mincougrade) {
mincougrade = course1[i];
mincougradetext = "course1";
}
if (course1[i] > maxcougrade) {
maxcougrade = course1[i];
maxcougradetext = "course1";
}
if (course1[i] < minstugrade) {
minstugrade = course1[i];
minstugradetext = "student" + [i];
}
if (course1[i] > maxstugrade) {
maxstugrade = course1[i];
maxstugradetext = "student" + [i];
}
}
for (i = 0; i < course2.length; i++) {
if (course2[i] < mincougrade) {
mincougrade = course2[i];
mincougradetext = "course2";
}
if (course2[i] > maxcougrade) {
maxcougrade = course2[i];
maxcougradetext = "course2";
}
if (course2[i] < minstugrade) {
minstugrade = course2[i];
minstugradetext = "student" + [i];
}
if (course2[i] > maxstugrade) {
maxstugrade = course2[i];
maxstugradetext = "student" + [i];
}
}
//calculate course average
for (i = 0; i < course0.length; i++) {
couavg += course0[i];
}
couavg = couavg / course0.length
if (couavg < mincouavg) {
mincouavg = couavg;
mincouavgtext = "course0";
}
if (couavg > maxcouavg) {
maxcouavg = couavg;
maxcouavgtext = "course0";
}
couavg = 0;
for (i = 0; i < course1.length; i++) {
couavg += course1[i];
}
couavg = couavg / course1.length
if (couavg < mincouavg) {
mincouavg = couavg;
mincouavgtext = "course1";
}
if (couavg > maxcouavg) {
maxcouavg = couavg;
maxcouavgtext = "course1";
}
couavg = 0;
for (i = 0; i < course2.length; i++) {
couavg += course2[i];
}
couavg = couavg / course2.length
if (couavg < mincouavg) {
mincouavg = couavg;
mincouavgtext = "course2";
}
if (couavg > maxcouavg) {
maxcouavg = couavg;
maxcouavgtext = "course2";
}
//calculate student average
for (i = 0; i < course0.length; i++) {
stuavgarr[i] += course0[i];
stuavgarr[i] += course1[i];
stuavgarr[i] += course2[i];
}
for (i=0; i < stuavgarr.length; i++) {
stuavgarr[i] = stuavgarr[i] / course0.length;
if (stuavgarr[i] < minstuavg) {
minstuavg = stuavgarr[i];
minstuavgtext = "student" + [i];
}
if (stuavgarr[i] > maxstuavg) {
maxstuavg = stuavgarr[i];
maxstuavgtext = "student" + [i];
}
}
document.getElementById("studmaxgrade").innerHTML = "Student that achieved the max grade is " + maxstugradetext
document.getElementById("studmingrade").innerHTML = "Student that achieved the min grade is " + minstugradetext
document.getElementById("studmaxavg").innerHTML = "Student that achieved the max average is " + maxstuavgtext
document.getElementById("studminavg").innerHTML = "Student that achieved the min average is " + minstuavgtext
document.getElementById("courmaxgrade").innerHTML = "The course in which the max grade is scored is " + maxcougradetext
document.getElementById("courmingrade").innerHTML = "The course in which the min grade is scored is " + mincougradetext
document.getElementById("courmaxavg").innerHTML = "The course in which the max average grade is scored is " + maxcouavgtext
document.getElementById("courminavg").innerHTML = "The course in which the min average grade is scored is " + mincouavgtext
}
</script>
The value of an input is a string, thus a + b will be interpreted as appending one string to another.
If you make sure the first parameter (a in this case) is an integer a + b will result in the two being mathematically adding the two
console.log( '0' + 1 + 2 + 3 + 4 ); //* outputs 01234
console.log( parseInt( 0 ) + 1 + 2 + 3 + 4 ); //* outputs 10
JSFiddle
Ok for a start you seem very confused about
document.getElementById
This does not address a javascript variable at all......
This literally "gets the document element by its id".
Here is an example of how to use it...
<html>
<img id='my_new_selfie' src='me.jpg'>
....
....
<script>
alert (document.getElementById('my_new_selfie').src)
</script>
This would simply pop up an alert with the text that describes the src of the
document object who's id is 'my_new_selfie'
that is....
[me.txt]
The reason that document.getElementById was introduced to javascript was to save developers learning the DOM (document object model) in order to access objects.
It allows you to simply give you object an id and change things about it using the id
In the above example I could use a script or button to change the image source
an example of this might be using the onclick event of another object on the page like a button...
onclick='document.getElementById('my_new_selfie').src='new_pic_of_me.JPG'
It is not used to identify variables in a javascript
I run a Blogger blog and I use follow code JavaScript code (requires no jQuery) to show the related post with labels/categories of the post.
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/-M72rpgunTq0/VUOKijudN_I/AAAAAAAABoI/LQ18scEunSg/w72/favicon-TIK.png";
var maxresults=16;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script type='text/javascript'>//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try {
thumburl[relatedTitlesNum] = entry.media$thumbnail.url
} catch (error) {
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl[relatedTitlesNum] = d
} else {
if (typeof(defaultnoimage) !== 'undefined') {
thumburl[relatedTitlesNum] = defaultnoimage
} else {
thumburl[relatedTitlesNum] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png"
}
}
}
if (relatedTitles[relatedTitlesNum].length > 80) {
relatedTitles[relatedTitlesNum] = relatedTitles[relatedTitlesNum].substring(0, 80) + "..."
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++
}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for (var i = 0; i < relatedUrls.length; i++) {
if (!contains_thumbs(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i]
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl = tmp3
}
function contains_thumbs(a, e) {
for (var j = 0; j < a.length; j++) {
if (a[j] == e) {
return true
}
}
return false
}
function printRelatedLabels_thumbs(current) {
var splitbarcolor;
if (typeof(splittercolor) !== 'undefined') {
splitbarcolor = splittercolor
} else {
splitbarcolor = "#d4eaf2"
}
for (var i = 0; i < relatedUrls.length; i++) {
if ((relatedUrls[i] == current) || (!relatedTitles[i])) {
relatedUrls.splice(i, 1);
relatedTitles.splice(i, 1);
thumburl.splice(i, 1);
i--
}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if (relatedTitles.length > 0) {
document.write('<div class="title">' + relatedpoststitle + '</div>')
}
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i < maxresults) {
document.write(' <img src="' + thumburl[r] + '"/><br/><div class="relatedpostitle" >' + relatedTitles[r] + '</div>');
i++;
if (r < relatedTitles.length - 1) {
r++
} else {
r = 0
}
}
document.write('</div>');
relatedUrls.splice(0, relatedUrls.length);
thumburl.splice(0, thumburl.length);
relatedTitles.splice(0, relatedTitles.length)
}
//]]></script>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'/>
<script expr:src='"/feeds/posts/summary/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script defer='defer' type='text/javascript'>removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs("<data:post.url/>");</script>
</div>
<div style='clear:both'/>
This code works fine except one problem. The code generates small images ( in default blogger thumbnail size which is s72-c) and there is no way to customize the size for (to change s72-c to s200/s200-c/w200).
I have found a image re-sizing solution script for Blogger but they are not helping. Here is it
function resizeThumb(size) {
var popularPost = document.getElementById('PopularPosts1');
var image = popularPost.getElementsByTagName('img');
for (var i = 0; i < image.length; i++) {
image[i].src = image[i].src.replace(/\/s72\-c/g, "\/s" + size + "-c")
}
}
resizeThumb(200);
This is for Popular post widget. And I know if I change the ID in the first line this will replace the image. But this is not solution but a cover up. And this also means the two images are loaded on is s72-c and the replaced one.
I want to integrate it (something like this) in the first related post script. I have tried hard with very very little knowledge of javascript I have but fail. So I signed up to stackoverflow and this is my question post.
Thank you in advance for trying to the help me.
function code for image size s200-c
function resizeThumb(size) {
var popularPost = document.getElementById('PopularPosts1');
var image = popularPost.getElementsByTagName('img');
for (var i = 0; i < image.length; i++) {
image[i].src = image[i].src.replace(/\/s200\-c/g, "\/s" + size + "-c")
}
}
resizeThumb(200);
function code for image size s200
function resizeThumb(size) {
var popularPost = document.getElementById('PopularPosts1');
var image = popularPost.getElementsByTagName('img');
for (var i = 0; i < image.length; i++) {
image[i].src = image[i].src.replace(/\/s200\/g, "\/s" + size + "")
}
}
resizeThumb(200);
first,add
var thumb = 200;
after
var thumburl = new Array();
then
add
thumburl[relatedTitlesNum] = thumburl[relatedTitlesNum].replace("/s72-c/","/s"+thumb+"/");
after
thumburl[relatedTitlesNum] = entry.media$thumbnail.url;
hope you like it
I made a puzzle game in javascript. I have made objects to keep some attributes relevant to the each pazzle squares. I want to get the object id which is relevant to the onclick.(not the div id). How to get the specific object id relevant to the clicked div?
window.onload = function() {
createDivs();
objects();
random();
onclickeventHanlder(event);
};
var getId;
var x = 3;
var counting = 0;
var tileSize = 600 / x;
var array2 = [];
var object = [];
function createDivs() {
var count = 0;
for (var i = 0; i < x; i++) {
for (var j = 0; j < x; j++) {
var id = i + "" + j;
var element = document.createElement('div');
element.setAttribute("class", "pieces");
element.setAttribute("id", id);
element.style.width = 600 / x + "px";
element.style.height = 600 / x + "px";
element.style.margin = "0px auto";
element.style.overflow = "hidden";
element.setAttribute("onclick", "onclickeventHanlder(this)");
if (count > 0) { // to break row-wise
if (i == count && j == 0) {
element.style.clear = "both";
}
}
element.style.float = "left";
document.getElementById('puzzle-body').appendChild(element);
}
count++;
}
}
function objects(){
var count = 0;
for (var i = 0; i < x; i++) {
for (var j = 0; j < x; j++) {
var objName = new Object();
objName.position = -(j * tileSize) + "px" + " " + -(i * tileSize) + "px";
objName.divID = document.getElementById(i + "" + j);
objName.id = count;
if(count<x*x-1){
objName.state = true; // if image is there
}else{
objName.state = false; // if image isn't there
}
object[count] = objName;
count++;
}
}
}
function reset(){
var looping = 0;
for (var i = 0; i < x; i++) {
for (var j = 0; j < x; j++) {
var obj = object[looping];
if(obj.id<8){
var urlString = 'url("../images/Golden.jpg")';
obj.divID.style.backgroundImage = urlString;
obj.divID.style.backgroundPosition = obj.position;
}
looping++;
}
}
}
function random(){
var array = [];
while (array.length < ((x * x) - 1)) {
var randomnumber = Math.floor(Math.random() * ((x * x) - 1));
var found = false;
for (var i = 0; i < array.length; i++) {
if (array[i] == randomnumber) {
found = true;
break;
}
}
if (!found) {
array[array.length] = randomnumber;
}
}
var looping = 0;
for (var i = 0; i < x; i++) {
for (var j = 0; j < x; j++) {
if (looping < x * x-1) {
var random = array[looping];
var obj = object[random];
var obj2 = object[looping];
if(obj.id<8){
var urlString = 'url("../images/Golden.jpg")';
obj.divID.style.backgroundImage = urlString;
obj.divID.style.backgroundPosition = obj2.position;
}
}
looping++;
}
}
}
function onclickeventHanlder(event) {
var pos = event;
}
I basically want this loop to produce random spaces in a grid I am developing, but cannot get it to work in my script.
I have the correct loop I just can't get it to work with the rest of my script
I have just edited and it still doesn't work, any other ideas?
var listOfWords = {};
var ul = document.getElementById("wordlist");
var i;
for(i = 0; i < ul.children.length; ++i){
listOfWords[ul.children[i].getAttribute("data-word")] = {
"pic" : ul.children[i].getAttribute("data-pic"),
"audio" : ul.children[i].getAttribute("data-audio")
};
}
console.log(listOfWords);
var chosenWords = new Array();
for(var x = 0; x < 6; x++)
{
var rand = Math.floor(Math.random() * (listOfWords.length+1));
chosenWords.push(listOfWords[rand]);
if (chosenWords.length < 12){
chosenWords.push(' ');
}
}
var shuffledWords = Object.keys(listOfWords).slice(0).sort(function() {
return 0.5 - Math.random();
}).slice(0, 6);
var guesses = {};
console.log(shuffledWords);
var tbl = document.createElement('table');
tbl.className = 'tablestyle';
var wordsPerRow = 2;
for (var i = 0; i < Object.keys(shuffledWords).length - 1; i += wordsPerRow) {
var row = document.createElement('tr');
for (var j = i; j < i + wordsPerRow; ++j) {
var word = shuffledWords[j];
guesses[word] = [];
for (var k = 0; k < word.length; ++k) {
var cell = document.createElement('td');
$(cell).addClass('drop').attr('data-word', word);
cell.textContent = word[k];
row.appendChild(cell);
}
}
tbl.appendChild(row);
}
document.body.appendChild(tbl);
Thanks
Hope this help you :
var listOfWords = [];
var ul = document.getElementById("wordlist");
var i;
for(i = 0; i < ul.children.length; ++i){
listOfWords.push({
"name" : ul.children[i].getAttribute("data-word"),
"pic" : ul.children[i].getAttribute("data-pic"),
"audio" : ul.children[i].getAttribute("data-audio")
});
console.log(listOfWords);
}
console.log(listOfWords);
var chosenWords = [];
var cpy_list = listOfWords.slice();
for(var x = 0; x < 6; x++)
{
var rand = Math.floor(Math.random() * (cpy_list.length));
console.log('push ' + cpy_list[rand].name);
chosenWords.push(cpy_list[rand].name);
cpy_list.splice(rand,1);
console.log(cpy_list);
if (chosenWords.length < 12){
console.log('make a blanck' );
chosenWords.push(' ');
}
}
console.log(chosenWords);
var shuffledWords = [];
shuffledWords = chosenWords.sort(function() { return 0.5 - Math.random() });
var guesses = {};
console.log(shuffledWords);
var tbl = document.createElement('table');
tbl.className = 'tablestyle';
var wordsPerRow = 2;
for (var i = 0; i < shuffledWords.length - 1; i += wordsPerRow) {
var row = document.createElement('tr');
console.log(shuffledWords);
for (var j = i; j < i + wordsPerRow; ++j) {
var word = shuffledWords[j];
console.log(j);
console.log(word);
guesses[word] = [];
for (var k = 0; k < word.length; ++k) {
var cell = document.createElement('td');
$(cell).addClass('drop').attr('data-word', word);
cell.textContent = word[k];
row.appendChild(cell);
}
}
tbl.appendChild(row);
}
document.body.appendChild(tbl);
$('#pickNext').click(function() {
// remove the class from all td's
$('td').removeClass('spellword');
// pick a random word
rndWord = Math.floor(Math.random() * (listOfWords.length));
// apply class to all cells containing a letter from that word
$('td[data-word="' + listOfWords[rndWord].name + '"]').addClass('spellword');
});
$('.drag').draggable({
helper: 'clone',
snap: '.drop',
grid: [60, 60],
revert: 'invalid',
snapMode: 'corner'
});
$('.drop').droppable ({
drop: function(event, ui) {
word = $(this).data('word');
guesses[word].push($(ui.draggable).attr('data-letter'));
console.log($(event));
console.log($(ui.draggable).text());
console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim());
if ($(this).text() == $(ui.draggable).text().trim()) {
$(this).addClass('wordglow3');
} else {
$(this).addClass('wordglow');
}
console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim());
console.log(guesses);
if (guesses[word].length == 3) {
if (guesses[word].join('') == word) {
$('td[data-word=' + word + ']').addClass('wordglow2');
} else {
$('td[data-word=' + word + ']').addClass("wordglow4");
guesses[word].splice(0, guesses[word].length);
}
}
},
activate: function(event, ui) {
word = $(this).data('word');
// try to remove the class
$('td[data-word=' + word + ']').removeClass('wordglow').removeClass('wordglow4').removeClass('wordglow3');
}
});
$(".minibutton").hover(function (){
$(this).css("text-decoration", "underline");
},function(){
$(this).css("text-decoration", "none");
}
);
$(".minibutton2").hover(function (){
$(this).css("text-decoration", "underline");
},function(){
$(this).css("text-decoration", "none");
}
);
var audio = $("#mysoundclip")[0];
$("button").click(function() {
var noExist = $('td[data-word=' + listOfWords[rndWord].name + ']').hasClass('wordglow2');
if (noExist) {
$('#pickNext').click();
} else {
$("#mysoundclip").attr('src', listOfWords[rndWord].audio);
audio.play();
}
});
var audio = $("#mysoundclip")[0];
$("button2").click(function() {
var noExist = $('td[data-word=' + listOfWords[rndWord].name + ']').hasClass('wordglow2');
if (noExist) {
$('#pickNext').click();
} else {
$("#mysoundclip").attr('src', listOfWords[rndWord].audio);
audio.play();
}
});
var pic = $("#mypic")[0];
$("button").click(function() {
var noExist = $('td[data-word=' + listOfWords[rndWord].name + ']').hasClass('wordglow2');
if (noExist) {
$('#pickNext').click();
} else {
pic = $("#mypic").attr('src', listOfWords[rndWord].pic);
pic.show();
}
});
function keys(obj) {
var keys = [];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
keys.push(key);
}
}
return keys;
}
First you should change :
If(chosenWords.length < 12){
to :
if (chosenWords.length < 12) {
and :
chosenWords.push(“ ”);
to :
chosenWords.push(' ');
and define the variable chosenWords.