Sudoku converting Xml to html to XSL

, ,
1

Hi I am trying to convert the following XML file into a 81 square Sudoku grid showing only selected numbers for selected cells, this is the problem that needs to be solved, my problem I am having is displying these selected numbers in the required cells in the 81 square grid. Can anyone please help me with my XSL file that i need to adjust to centre on the required cells and rows to pinpoint and select numebrs into their correct cells.

XSL FILE:
So far my results from using the gridy.xsl file are that I get 81 squares coming up, but each cell has three fullstops, which is wrong as there only needs to be one number in each celland I dont know how to do this part??!! I’ve tried a few ideas but there is no improvement.

Below is the XML file that links the XSl file:

<?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="gridy.xsl"?>

<sml:grid xmlns:sml=“http://www.w3.org/TR/WD-XS/sml”>

<sml:row id=“1”>
<sml:largesquare squareno=“1”>

<sml:smallrow rowid=“1”>
<sml:smallsquare cellid=“1”>3</sml:smallsquare>
<sml:smallsquare cellid=“2”></sml:smallsquare>
<sml:smallsquare cellid=“3”></sml:smallsquare>
</sml:smallrow>

<sml:smallrow rowid=“2”>
<sml:smallsquare cellid=“4”></sml:smallsquare>
<sml:smallsquare cellid=“5”>4</sml:smallsquare>
<sml:smallsquare cellid=“6”></sml:smallsquare>
</sml:smallrow>

<sml:smallrow rowid=“3”>
<sml:smallsquare cellid=“7”></sml:smallsquare>
<sml:smallsquare cellid=“8”></sml:smallsquare>
<sml:smallsquare cellid=“9”></sml:smallsquare>
</sml:smallrow>

</sml:largesquare>

<sml:largesquare squareno=“2”>

<sml:smallrow rowid=“4”>
<sml:smallsquare cellid=“10”></sml:smallsquare>
<sml:smallsquare cellid=“11”>6</sml:smallsquare>
<sml:smallsquare cellid=“12”>5</sml:smallsquare>
</sml:smallrow>

<sml:smallrow rowid=“5”>
<sml:smallsquare cellid=“13”></sml:smallsquare>
<sml:smallsquare cellid=“14”></sml:smallsquare>
<sml:smallsquare cellid=“15”>9</sml:smallsquare>
</sml:smallrow>

<sml:smallrow rowid=“6”>
<sml:smallsquare cellid=“16”>3</sml:smallsquare>
<sml:smallsquare cellid=“17”></sml:smallsquare>
<sml:smallsquare cellid=“18”></sml:smallsquare>
</sml:smallrow>
</sml:largesquare>

<sml:largesquare squareno=“3”>
<sml:smallrow rowid=“7”>
<sml:smallsquare cellid=“19”>7</sml:smallsquare>
<sml:smallsquare cellid=“20”>4</sml:smallsquare>
<sml:smallsquare cellid=“21”>2</sml:smallsquare>
</sml:smallrow>

<sml:smallrow rowid=“8”>
<sml:smallsquare cellid=“22”>3</sml:smallsquare>
<sml:smallsquare cellid=“23”></sml:smallsquare>
<sml:smallsquare cellid=“24”>1</sml:smallsquare>
</sml:smallrow>

<sml:smallrow rowid=“9”>
<sml:smallsquare cellid=“25”>8</sml:smallsquare>
<sml:smallsquare cellid=“26”></sml:smallsquare>
<sml:smallsquare cellid=“27”>5</sml:smallsquare>
</sml:smallrow>

</sml:largesquare>
</sml:row>

<sml:row id=“2”>
<sml:largesquare squareno=“4”>
<sml:smallrow rowid=“10”>
<sml:smallsquare cellid=“28”></sml:smallsquare>
<sml:smallsquare cellid=“29”>3</sml:smallsquare>
<sml:smallsquare cellid=“30”></sml:smallsquare>
</sml:smallrow>

<sml:smallrow rowid=“11”>
<sml:smallsquare cellid=“31”>5</sml:smallsquare>
<sml:smallsquare cellid=“32”></sml:smallsquare>
<sml:smallsquare cellid=“33”>4</sml:smallsquare>
</sml:smallrow>

<sml:smallrow rowid=“12”>
<sml:smallsquare cellid=“34”>1</sml:smallsquare>
<sml:smallsquare cellid=“35”></sml:smallsquare>
<sml:smallsquare cellid=“36”></sml:smallsquare>
</sml:smallrow>
</sml:largesquare>

<sml:largesquare squareno=“5”>
<sml:smallrow rowid=“13”>
<sml:smallsquare cellid=“37”></sml:smallsquare>
<sml:smallsquare cellid=“38”></sml:smallsquare>
<sml:smallsquare cellid=“39”></sml:smallsquare>
</sml:smallrow>

<sml:smallrow rowid=“14”>
<sml:smallsquare cellid=“40”>6</sml:smallsquare>
<sml:smallsquare cellid=“41”>7</sml:smallsquare>
<sml:smallsquare cellid=“42”>2</sml:smallsquare>
</sml:smallrow>

<sml:smallrow rowid=“15”>
<sml:smallsquare cellid=“43”></sml:smallsquare>
<sml:smallsquare cellid=“44”></sml:smallsquare>
<sml:smallsquare cellid=“45”></sml:smallsquare>
</sml:smallrow>
</sml:largesquare>

<sml:largesquare squareno=“6”>
<sml:smallrow rowid=“16”>
<sml:smallsquare cellid=“46”></sml:smallsquare>
<sml:smallsquare cellid=“47”></sml:smallsquare>
<sml:smallsquare cellid=“48”>4</sml:smallsquare>
</sml:smallrow>

<sml:smallrow rowid=“17”>
<sml:smallsquare cellid=“49”>9</sml:smallsquare>
<sml:smallsquare cellid=“50”></sml:smallsquare>
<sml:smallsquare cellid=“51”>3</sml:smallsquare>
</sml:smallrow>

<sml:smallrow rowid=“18”>
<sml:smallsquare cellid=“52”></sml:smallsquare>
<sml:smallsquare cellid=“53”>7</sml:smallsquare>
<sml:smallsquare cellid=“54”></sml:smallsquare>
</sml:smallrow>
</sml:largesquare>
</sml:row>

<sml:row id=“3”>
<sml:largesquare squareno=“7”>
<sml:smallrow rowid=“19”>
<sml:smallsquare cellid=“55”>8</sml:smallsquare>
<sml:smallsquare cellid=“56”></sml:smallsquare>
<sml:smallsquare cellid=“57”>1</sml:smallsquare>
</sml:smallrow>

<sml:smallrow rowid=“20”>
<sml:smallsquare cellid=“58”>4</sml:smallsquare>
<sml:smallsquare cellid=“59”></sml:smallsquare>
<sml:smallsquare cellid=“60”>6</sml:smallsquare>
</sml:smallrow>

<sml:smallrow rowid=“21”>
<sml:smallsquare cellid=“61”>9</sml:smallsquare>
<sml:smallsquare cellid=“62”>2</sml:smallsquare>
<sml:smallsquare cellid=“63”>3</sml:smallsquare>
</sml:smallrow>
</sml:largesquare>

<sml:largesquare squareno=“8”>
<sml:smallrow rowid=“22”>
<sml:smallsquare cellid=“64”></sml:smallsquare>
<sml:smallsquare cellid=“65”></sml:smallsquare>
<sml:smallsquare cellid=“66”>6</sml:smallsquare>
</sml:smallrow>

<sml:smallrow rowid=“23”>
<sml:smallsquare cellid=“67”>2</sml:smallsquare>
<sml:smallsquare cellid=“68”></sml:smallsquare>
<sml:smallsquare cellid=“69”></sml:smallsquare>
</sml:smallrow>

<sml:smallrow rowid=“24”>
<sml:smallsquare cellid=“70”>5</sml:smallsquare>
<sml:smallsquare cellid=“71”>1</sml:smallsquare>
<sml:smallsquare cellid=“72”></sml:smallsquare>
</sml:smallrow>
</sml:largesquare>

<sml:largesquare squareno=“9”>
<sml:smallrow rowid=“25”>
<sml:smallsquare cellid=“73”></sml:smallsquare>
<sml:smallsquare cellid=“74”></sml:smallsquare>
<sml:smallsquare cellid=“75”></sml:smallsquare>
</sml:smallrow>

<sml:smallrow rowid=“26”>
<sml:smallsquare cellid=“76”></sml:smallsquare>
<sml:smallsquare cellid=“77”>3</sml:smallsquare>
<sml:smallsquare cellid=“78”></sml:smallsquare>
</sml:smallrow>

<sml:smallrow rowid=“27”>
<sml:smallsquare cellid=“79”></sml:smallsquare>
<sml:smallsquare cellid=“80”></sml:smallsquare>
<sml:smallsquare cellid=“81”>6</sml:smallsquare>
</sml:smallrow>
</sml:largesquare>
</sml:row>

</sml:grid>

BElow is the XSL file that converts the XML above to the 81 square grid

<?xml version="1.0"?>

<xsl:stylesheet version=“1.0” xmlns:xsl=“Extensible Stylesheet Language (XSL) Version 1.1”>

<xsl:template match=“/”>

<xsl:template match=“sml:grid”>

</xsl:for-each>

</xsl:for-each>

</xsl:for-each>

. . .

</xsl:template>
</xsl:stylesheet>

These three lines below taken from the code above show where the three fullstops come from, they represent three rows in each 9 large squares of the 81 square grid, what i want to find out is how to change these full stops to numbers now???
ANY IDEAS Out there ANY HELP WOULD be greatly appreciated!!!

. . .
2

Hello there !

Does the attached XSL do the job you want ?

BTW, beware of your XSL namespace. The one specified in my XSL shall be used instead.

Feel free to ask for more.

Cheers.
gridy.xsl (1.35 KB)

3

Hi Thank you the new xsl file works great the numbers and the tables come up fine, if you dont mind I need help on the next step now, I am trying to create the solution page for the sudoku problem, in order to this I want to establish a on click button that has a name of “solution” and when clicked on will display the same table but instead of the blanks in the problem page it will open the solution page which has all the answers for the blank numbers.

I have thought of one way but I do not know how to implement it in the code:

This method means that i need to make changes changes to my XML file in which I need to put a value for each of the 81 smallsquares and then create an attribute such as “display” which has a value equal to ‘yes or no’ for each smallsquare element and use that as an ‘variable’ in my XSl file to build a predicate so that the program is able to choose when to display the answers and when not to depending on the display variable weather it is a yes or no? and also depending on the button that is clicked to open the solution page.

This is my problem now I am trying to figure out hope my goal makes make sense?? Thank you again for your help look forward to your reply!

Any help on this again will be much appreciated.

4

Hello,

Here comes an implementation of your solution. Indeed, it is not a complete solution, but it gives an idea how to do it.

It is completely client-side (DHTLM show solution). An “expert” could hack the HTML page and see the solution. It is not pulled from a server component, it is already written in the HTML. An ASP/JSP/AJAX implementation shall solve the issue.

Tested under IE.

Show / Hide solution is not implemented. Look for DHTLM sample to implement it.

You may need to rewrite relative CSS/JS path with absolute ones.

Solution cells are embodied by ‘?’ (question mark). Fill in the XML file with the right numbers (i’m not a sudoku experts).

Cheers

JS & CSS attachment are not allowed :

// Sudoku.css

.displaySmallSquare
{
color: black;
}

.hideSmallSquare
{
visibility: hidden;
}

.solutionSmallSquare
{
color: red;
}

// Sudoku.js
function showSolution()
{
var divs = document.getElementsByTagName(“div”);
var nbDivs = divs.length;

for (var i=0; i<nbDivs; i++)
{
	var div = divs[i];
	// Works for IE
	if (div.getAttribute("className") == "hideSmallSquare")
	{
		div.setAttribute("className", "solutionSmallSquare");
	}
}

}

// Sudoku.xsl

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version=“1.0” xmlns:xsl=“XSLT Namespace” xmlns:sml=“http://www.w3.org/TR/WD-XS/sml”>
<xsl:output method=“html” encoding=“ISO-8859-1”/>
<xsl:template match=“/”>


SUDOKU




<xsl:apply-templates select=“sml:grid”/>


</xsl:template>
<xsl:template match=“sml:grid”>



<xsl:for-each select=“sml:row”>

<xsl:for-each select=“sml:largesquare”>



<xsl:for-each select=“sml:smallrow”>

<xsl:for-each select=“sml:smallsquare”>


xsl:choose
<xsl:when test=“@display=‘yes’”>
<xsl:attribute name=“class”>displaySmallSquare</xsl:attribute>
</xsl:when>
xsl:otherwise
<xsl:attribute name=“class”>hideSmallSquare</xsl:attribute>
</xsl:otherwise>
</xsl:choose>

														<xsl:value-of select="."/>
													</div>
												</td>
											</xsl:for-each>
										</tr>
									</xsl:for-each>
								</tr>
							</table>
						</td>
					</xsl:for-each>
				</tr>
			</xsl:for-each>
		</tr>
	</table>
	<!--End of large 2 coloumn-->
	<br /><br />
	<input type="button" name="SolutionButton" value="Solution" onclick="javacript:showSolution()" />
</xsl:template>

</xsl:stylesheet>
a.xml (6.8 KB)
5

Hi Thanks again for the help
attached is the xml file with the answers working fine, its great, one more question:

how do i use the Java script you have made to create another button that resets or removes the answers and brings back the problem page?

This is the java you gave me for the js file

function showSolution()
{
var divs = document.getElementsByTagName(“div”);
var nbDivs = divs.length;

for (var i=0; i<nbDivs; i++)
{
var div = divs[i];
// Works for IE
if (div.getAttribute(“className”) == “hideSmallSquare”)
{
div.setAttribute(“className”, “solutionSmallSquare”);
}
}
}

In the XSL file i need to put in another line with the following

is that correct, what changes need to be made to the java?

Thanks Again
sudoku.xml (6.8 KB)

6

In order to dynamically set the Show / Hide solution button, replace the javascript file with this content :

// sudoku.js

function showSolution()
{
var divs = document.getElementsByTagName(“div”);
var nbDivs = divs.length;

for (var i=0; i<nbDivs; i++)
{
	var div = divs[i];
	// Works for IE
	if (div.getAttribute("className") == "hideSmallSquare")
	{
		div.setAttribute("className", "solutionSmallSquare");
	}
}

// Sets button to "Hide Solution" status
var button = document.getElementsByName("SolutionButton")[0];
button.value = "Hide Solution";
button.onclick = hideSolution;

}

function hideSolution()
{
var divs = document.getElementsByTagName(“div”);
var nbDivs = divs.length;

for (var i=0; i<nbDivs; i++)
{
	var div = divs[i];
	// Works for IE
	if (div.getAttribute("className") == "solutionSmallSquare")
	{
		div.setAttribute("className", "hideSmallSquare");
	}
}

// Sets button to "Show Solution" status
var button = document.getElementsByName("SolutionButton")[0];
button.value = "Solution";
button.onclick = showSolution;

}

Cheers