Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Apr 2013
    Location
    Kirkland,WA
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need help making a solution button and list strike through

    Hello,

    I need some help with my word search puzzle. I need to make it so that when a word is clicked on the list it will strike through and also I need to make it so that when you click the solution button it shows all the words in the puzzle.

    Code:
    <!DOCTYPE html>
    <html>
    
       <head>
       
    
          <meta charset="UTF-8" />
          <title>Word Search Game</title>
          <script src="modernizr-1.5.js" type="text/javascript" ></script>
          <script src="wordsearch.js" type="text/javascript" ></script>
          <script src="words.js" type="text/javascript" ></script>
          <link href="kgstyles.css" rel="stylesheet" type="text/css" />
    
          <link href="wordsearch.css" rel="stylesheet" type="text/css" />
    
    
       </head>
    
       <body onLoad="init(letterGrid, wordGrid, wordList)">
          <section id="main">
    
             <header>
                <img src="kglogo.jpg" alt="Kiddergarden" />
             </header>
    
             <div id="links">
                <img src="links.jpg" alt="" />
             </div>
    
             <article>
                <img src="headmenu.jpg" alt="" />
                <img src="title.jpg" id="h1img" alt="Guessing Game" />
                
                <figure id="wordTable"></figure>
    
                <aside>
                   <h1></h1>
                   <p>Click the letters in the grid that match the words listed
                      below. When you find a word, strike it out from the list
                      by clicking the entry.
                   </p>
                   <figure id="wordList"></figure>
                   <ul onLoad='makelist()'>
                   </ul>
                </aside>
                
                <div>
                   <input type="button" id="solve" value = "Show Solution" />
                </div>
    
             </article>
    
          </section>
    
       </body>
    
    </html>
    Code:
     function init(letterGrid, wordGrid, words) {
    	document.getElementsByTagName("h1")[0].innerHTML = puzzleTitle;
    	document.getElementById("wordTable").innerHTML = drawWordSearch( letterGrid, wordGrid );
    	document.getElementById("wordList").appendChild( makeList( words ) );
    	document.getElementById("solve").onclick = showSolution;
    }
    
    function makeList(words){
    
    	var listContainer =  document.createElement("ul");
    	var numberOfListItems = words.length;
    	for ( var i = 0; i <numberOfListItems; i++ ) {
    		var item = document.createElement("li");
    		item.innerHTML = words[i];
    		listContainer.appendChild( item );
    	}
    
    	return listContainer;
    }
    
    function drawWordSearch(letterGrid, wordGrid) {
    	var rowSize = letterGrid.length;
    	var colSize = letterGrid[0].length;
    
    	var htmlCode = "<table id='wordsearchtable'>";
    
    	for (var i = 0; i < rowSize; i++) {
    		htmlCode += "<tr>";
    
    		for (var j = 0; j < colSize; j++) {
    			if (wordGrid[i][j] == " ") {
    				htmlCode += "<td id='"+i+"_"+j+"' onClick='cellClicked("+i+","+j+")'>";
    			} else {
    				htmlCode += "<td id='"+i+"_"+j+"' onClick='cellClicked("+i+","+j+")' class='wordCell' >";
    			}
    			htmlCode += letterGrid[i][j];
    			htmlCode += "</td>";
    		}
    
    		htmlCode += "</tr>";
    	}
    	htmlCode += "</table>";
    
    	return htmlCode;
    }
    
    // Highlights cell selected and when clicked again it becomes unhighlighted
    function cellClicked(row, col) {
    	var cell = document.getElementById(row+"_"+col);
    	if( cell.style.backgroundColor == "" ) {
    		cell.style.backgroundColor = "rgb(255,0,0)";
    	} else {
    		cell.style.backgroundColor = "";
    	}}
    	
    
    function showSolution() {
    
    }
    Code:
    var puzzleTitle = "Astronomy";
    
    var wordList = ["CALLISTO", "CERES", "CHARON", "EARTH", "EUROPA",
                    "DEMOS", "GANYMEDE", "IO", "JUPITER", "MARS", 
                    "MERCURY", "MOON", "NEPTUNE", "PHOBOS", "PLUTO", 
                    "SATURN", "SOL", "TITAN", "URANUS", "VENUS"];
    
    var letterGrid =
    [
    ["R","K","M","F","T","S","N","Y","L","R","J","S","O","B","O","H","P","Y","X","D","N","A","G","Z","N"],
    ["T","E","A","A","E","E","U","E","F","N","K","M","T","H","E","B","V","K","W","U","S","K","N","D","I"],
    ["S","L","A","R","L","K","P","L","P","O","L","C","A","J","J","A","Q","D","X","A","S","R","A","M","P"],
    ["Z","J","E","R","E","Y","R","I","P","N","N","A","B","H","I","Z","X","O","N","M","M","R","A","T","P"],
    ["P","C","S","G","T","I","C","L","Y","M","S","L","U","Q","D","M","H","N","D","G","K","K","W","W","C"],
    ["O","A","W","M","W","H","N","V","A","M","T","L","E","R","Y","R","D","Z","T","L","Z","C","C","C","Q"],
    ["D","K","N","B","G","H","R","X","S","V","N","I","U","D","A","F","B","V","O","P","U","J","Z","H","M"],
    ["G","W","V","Y","S","B","D","A","Q","B","D","S","D","B","A","N","P","S","X","D","S","Q","W","T","N"],
    ["P","D","D","T","V","Y","W","C","E","H","Z","T","C","Z","C","N","U","F","T","B","F","X","H","M","S"],
    ["D","U","N","P","A","I","E","D","P","A","R","O","U","Q","Q","E","H","S","Q","H","X","T","D","V","M"],
    ["X","R","H","O","W","D","E","F","W","E","U","P","K","W","R","P","W","O","V","U","Y","F","B","B","D"],
    ["V","H","D","J","V","M","U","K","T","X","E","R","V","U","V","P","R","T","W","B","M","I","A","E","M"],
    ["U","C","T","K","Y","Q","C","I","X","J","R","E","B","D","R","P","Z","K","P","W","I","G","P","M","G"],
    ["S","Z","K","N","W","A","P","I","L","V","W","S","V","E","N","U","S","F","N","F","L","J","O","C","M"],
    ["E","O","A","G","K","U","T","I","Y","T","M","V","Z","U","W","W","S","A","T","U","R","N","R","E","D"],
    ["Z","G","J","N","J","Z","W","Y","G","S","O","V","G","M","Z","R","T","I","T","A","N","S","U","Y","U"],
    ["C","E","Z","R","D","U","Q","P","U","R","O","R","Z","T","I","I","D","B","Z","S","V","F","E","R","V"],
    ["N","N","L","W","E","P","F","W","A","R","N","U","F","D","B","V","K","F","X","D","I","V","R","U","T"],
    ["D","U","B","N","T","N","A","F","W","J","R","J","D","W","G","A","W","R","C","L","Y","K","I","C","N"],
    ["S","T","U","J","O","K","Q","D","Y","D","M","R","S","C","X","S","F","W","I","G","Q","D","B","R","Z"],
    ["B","P","W","S","A","R","O","I","D","L","Z","T","C","Q","S","M","U","C","P","M","J","S","S","E","R"],
    ["J","E","E","H","I","H","A","C","N","D","Q","P","L","U","T","O","S","N","X","J","K","G","C","M","J"],
    ["Z","N","C","S","I","H","D","H","S","R","Z","J","U","N","E","O","J","T","Y","X","A","C","V","S","Z"],
    ["Q","X","S","Y","L","M","C","L","C","F","Z","K","Z","K","F","T","L","N","N","P","K","J","V","Q","K"],
    ["C","N","Q","O","L","I","F","N","D","C","P","S","S","R","B","S","Q","O","B","D","E","M","O","S","Q"]
    ]
    
    var wordGrid =
    [
    [" "," "," "," "," ","#"," "," "," "," "," ","#","#","#","#","#","#"," "," "," "," "," "," "," "," "],
    [" ","#"," "," ","#"," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "],
    [" "," ","#","#"," "," "," "," "," "," "," ","#"," "," "," "," "," "," "," "," ","#","#","#","#"," "],
    [" "," ","#","#"," "," "," "," "," "," "," ","#"," "," "," "," "," "," "," "," "," "," "," "," "," "],
    [" ","#"," "," ","#"," "," "," "," "," "," ","#","#"," "," "," "," "," "," "," "," "," "," "," "," "],
    [" "," "," "," "," ","#"," "," "," "," "," ","#"," ","#"," "," "," "," "," ","#"," "," "," "," "," "],
    [" "," "," "," "," "," "," "," "," "," "," ","#"," "," ","#"," "," "," ","#"," "," "," "," "," "," "],
    [" "," "," "," "," "," "," "," "," "," "," ","#"," "," "," ","#"," ","#"," "," "," "," "," "," "," "],
    [" "," "," "," "," "," "," "," ","#"," "," ","#"," "," "," "," ","#"," "," "," "," "," "," "," "," "],
    [" "," "," "," "," "," "," ","#"," "," ","#","#"," "," "," "," "," ","#"," "," "," "," "," "," "," "],
    [" "," "," "," "," "," ","#"," "," ","#"," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "],
    [" "," "," "," "," ","#"," "," ","#"," "," "," "," "," "," "," "," "," "," "," "," "," ","#"," "," "],
    [" "," "," "," ","#"," "," ","#"," "," "," "," "," "," "," "," "," "," "," "," "," "," ","#"," "," "],
    [" "," "," ","#"," "," ","#"," "," "," "," "," ","#","#","#","#","#"," "," "," "," "," ","#"," "," "],
    [" "," ","#"," "," ","#"," "," "," "," ","#"," "," "," "," "," ","#","#","#","#","#","#","#"," "," "],
    [" ","#"," "," ","#"," "," "," "," "," ","#"," "," "," "," "," ","#","#","#","#","#"," ","#","#"," "],
    [" ","#"," "," "," "," "," "," "," "," ","#"," "," "," "," "," "," "," "," "," "," "," ","#","#"," "],
    [" ","#"," "," "," "," "," "," "," "," ","#"," "," "," "," "," "," "," "," "," "," "," "," ","#"," "],
    [" ","#"," ","#"," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ","#"," "],
    [" ","#"," "," ","#"," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ","#"," "],
    [" ","#"," "," "," ","#","#","#"," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ","#"," "],
    [" ","#"," "," "," "," ","#"," "," "," "," ","#","#","#","#","#"," "," "," "," "," "," "," ","#"," "],
    [" ","#"," "," "," "," "," ","#"," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "],
    [" "," "," "," "," "," "," "," ","#"," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "],
    [" "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ","#","#","#","#","#"," "]
    ]

  • #2
    New Coder
    Join Date
    Feb 2013
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is some help with your show solution. I do not know what you mean by strike through though.

    Code:
    var ShowAnswer = document.getElementByID("Your button ID here"); //get the button ID
    ShowAnswer.addEventListener("click", showSolution); //add an event listener to toggle when the button is clicked then run the function
    
    function showSolution() {
        var joinList = wordList.join(", "); //join the array into a string with ", " seperator
        return joinList; //return the string
    }

    PS: If you wanted it to do more than what I have posted make sure you specify that in your questions, because to me it was somewhat vague.
    Last edited by JonBMN; 04-26-2013 at 05:46 PM. Reason: reminder

  • #3
    New Coder
    Join Date
    Apr 2013
    Location
    Kirkland,WA
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by JonBMN View Post
    Here is some help with your show solution. I do not know what you mean by strike through though.

    Code:
    var ShowAnswer = document.getElementByID("Your button ID here"); //get the button ID
    ShowAnswer.addEventListener("click", showSolution); //add an event listener to toggle when the button is clicked then run the function
    
    function showSolution() {
        var joinList = wordList.join(", "); //join the array into a string with ", " seperator
        return joinList; //return the string
    }

    PS: If you wanted it to do more than what I have posted make sure you specify that in your questions, because to me it was somewhat vague.
    Thank you! Sorry I did not really know how to phrase my question. On the right of the puzzle on the page there is a list of words ( wordList ). I need a function that causes a line to go through ( or strike it out ) when a user clicks on that specific word. Does that make sense?

  • #4
    New Coder
    Join Date
    Feb 2013
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's fine, sometimes I don't know how to either, but it all comes with experience

    So to get this straight you'd like to make it so if you clicked the word in your wordList, the values would highlight in your grid?

  • #5
    New Coder
    Join Date
    Apr 2013
    Location
    Kirkland,WA
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by JonBMN View Post
    It's fine, sometimes I don't know how to either, but it all comes with experience

    So to get this straight you'd like to make it so if you clicked the word in your wordList, the values would highlight in your grid?
    No, though that would be cool lol. So you know how when you have a word puzzle and you find a word from the list of words that you are searching for? You would put a line through the word on the list, not just the puzzle, to say ok I already found that one. The word in the Grid will just be highlighted it does not need a strike. I am probably terrible at explaining this sorry.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,990
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Code:
    function makeList(words){
    
    	var listContainer =  document.createElement("ul");
    	var numberOfListItems = words.length;
    	for ( var i = 0; i <numberOfListItems; i++ ) {
    		var item = document.createElement("li");
    		item.innerHTML = words[i];
    		item.onclick=function (){this.style.textDecoration="line-through"}
    		listContainer.appendChild( item );
    	}
    
    	return listContainer;
    }
    Code:
    function showSolution() {
    var rowSize = letterGrid.length;
    	var colSize = letterGrid[0].length;
    
    	var mytab=document.getElementById('wordsearchtable');
    
    	for (var i = 0; i < rowSize; i++) {
    
    		for (var j = 0; j < colSize; j++) {
    			if (wordGrid[i][j] == "#") {
    				mytab.rows[i].cells[j].innerHTML = letterGrid[i][j]
    			} else {
    				mytab.rows[i].cells[j].innerHTML =" ";
    			}
    		}
    
    	}
    }
    fyi, IE doesn't like that way of constructing a table. Here is the "proper" way: http://javascriptexample.net/domtable.php

  • Users who have thanked xelawho for this post:

    Squeakasaur (04-26-2013)

  • #7
    New Coder
    Join Date
    Apr 2013
    Location
    Kirkland,WA
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    Code:
    function makeList(words){
    
    	var listContainer =  document.createElement("ul");
    	var numberOfListItems = words.length;
    	for ( var i = 0; i <numberOfListItems; i++ ) {
    		var item = document.createElement("li");
    		item.innerHTML = words[i];
    		item.onclick=function (){this.style.textDecoration="line-through"}
    		listContainer.appendChild( item );
    	}
    
    	return listContainer;
    }
    Code:
    function showSolution() {
    var rowSize = letterGrid.length;
    	var colSize = letterGrid[0].length;
    
    	var mytab=document.getElementById('wordsearchtable');
    
    	for (var i = 0; i < rowSize; i++) {
    
    		for (var j = 0; j < colSize; j++) {
    			if (wordGrid[i][j] == "#") {
    				mytab.rows[i].cells[j].innerHTML = letterGrid[i][j]
    			} else {
    				mytab.rows[i].cells[j].innerHTML =" ";
    			}
    		}
    
    	}
    }
    fyi, IE doesn't like that way of constructing a table. Here is the "proper" way: http://javascriptexample.net/domtable.php
    Awesome that works. Are you able to explain it all to em a bit? I am still learning a lot. That is similar to what I had started but then erased it because I wasn't sure I was doing it right. Also, how would I make it so the words are just highlighted instead of the whole puzzle disappearing except the words?

  • #8
    New Coder
    Join Date
    Apr 2013
    Location
    Kirkland,WA
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So my posts are not showing but may eventually, they can be ignored. I figured it out:

    Code:
     
    function showSolution() {
    var rowSize = letterGrid.length;
    	var colSize = letterGrid[0].length;
    
    	var mytab=document.getElementById('wordsearchtable');
    
    	for (var i = 0; i < rowSize; i++) {
    
    		for (var j = 0; j < colSize; j++) {
    			if (wordGrid[i][j] == "#") {
    				mytab.rows[i].cells[j].innerHTML = letterGrid[i][j]
    			} else {
    				mytab.rows[i].cells[j].style.backgroundColor = "rgb(255,255,255)";
    			}
    		}
    
    	}
    }

  • #9
    New Coder
    Join Date
    Apr 2013
    Location
    Kirkland,WA
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Squeakasaur View Post
    So my posts are not showing but may eventually, they can be ignored. I figured it out:

    Code:
     
    function showSolution() {
    var rowSize = letterGrid.length;
    	var colSize = letterGrid[0].length;
    
    	var mytab=document.getElementById('wordsearchtable');
    
    	for (var i = 0; i < rowSize; i++) {
    
    		for (var j = 0; j < colSize; j++) {
    			if (wordGrid[i][j] == "#") {
    				mytab.rows[i].cells[j].innerHTML = letterGrid[i][j]
    			} else {
    				mytab.rows[i].cells[j].style.backgroundColor = "rgb(255,255,255)";
    			}
    		}
    
    	}
    }
    //This was about the highlighting the words instead of making the puzzle disappear. You guys are all so much help!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •