0

I have two XHTML files and my task is to convert from one to another with XSLT (or any other method by Java Program). I searched but I didn't get any example for this, all are related for converting one XML to another with XSLT or little bit information for one XHMTL to other. So can anyone please explain the procedure with one example containing source, desired and XSLT files by using my XHTML files or any other. II'll be very much thankful for that.

Source file [1]-

<?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-type" content="text/html;  charset=utf-8" />  
<title>eXe</title>  
<style type="text/css">  
@import url(base.css);  
@import url(content.css);  
</style>  
<script type="text/javascript" src="common.js"></script>  
</head>  
<body>  
<div id="outer">  
<div id="main">  
<div id="nodeDecoration">  
<p id="nodeTitle">  
Part 1</p>  
</div>  
<div class="TrueFalseIdevice" id="id12">  
<script type="text/javascript" src="common.js"></script>  
<!--THIS JAVASCRIPT HAS TO BE ELIMINATED-->  
<script type="text/javascript" src="libot_drag.js"></script>  
<div class="iDevice emphasis1">  
<img alt="" class="iDevice_icon" src="icon_question.gif" />  
<span class="iDeviceTitle">True-False Question</span><br/>  
<div class="iDevice_inner">  
<div id="ta12_16" class="block" style="display:block">  

</div><div class="question">  
<br/><br/><div id="taquestion0b12" class="block" style="display:block">1><span style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff; display: inline ! important; float: none"> SQL Stands for Structure Query Language?</span>   

<!--THIS ONCLICK EVENT HAS TO BE REMOVED-->  
</div><br/>True <input type="radio" name="option0b12" id="true0b12" onclick="getFeedback(0,2,'0b12','truefalse')"/>   
False <input type="radio" name="option0b12" id="false0b12" onclick="getFeedback(1,2,'0b12','truefalse')"/>  
<div id="s0b0b12" style="color: rgb(0, 51, 204);display: none;" even_steven="18">Correct! </div>  
<div id="s1b0b12" style="color: rgb(0, 51, 204);display: none;" even_steven="19">Incorrect! </div>  
<div id="sfbk0b12" style="color: rgb(0, 51, 204);display: none;"><div id="tafeedback0b12" class="block" style="display:block">  

</div></div>  
</div>  
</div>  
</div>  
</body></html>

Desired File [1]:

<?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title>eXe</title>  
<meta http-equiv="Content-Type" content="text/html;  charset=utf-8" />  
<!-- Created using eXe: http://exelearning.org -->  
<style type="text/css">  
@import url(base.css);  
@import url(content.css);  
</style>  
<script type="text/javascript" src="common.js"></script>  
</head>  
<!--THESE TWO JAVASCRIPT HAVE TO BE INCLUDED-->  
<script type="text/javascript" src="APIWrapper.js"></script>  
<script type="text/javascript" src="SCOFunctions.js"></script>  
<body onload="loadPage()" onunload="unloadPage()"><div id="outer">  
<div id="main">  
<div id="nodeDecoration">  
<p id="nodeTitle">  
Part 1</p></div>  
<div class="QuizTestIdevice" id="id8">  
<!--THIS JAVASCRIPT AND FORM HAVE TO BE INCLUDED-->  
<script type="text/javascript" src="calculate.js"></script>  
<form name="quizForm8" id="quizForm8" action="javascript:calcScore2();">  
<div class="iDevice emphasis1">  
<img alt="" class="iDevice_icon" src="icon_question.gif" />  
<span class="iDeviceTitle">SCORM Quiz</span>  
<div class="iDevice_inner">  
<div class="passrate" value="50"></div>  
<div class="question">  
<div id="taquestion0b8" class="block" style="display:block">1> SQL Stands for Structure Query Language?  

</div><br/>  
<table><tr><td><input type="radio" name="key0b8" value="0" />  
</td><td>  
<div id="taoptionAnswer0q0b8" class="block" style="display:block">True  

</div></td></tr>  
<tr><td><input type="radio" name="key0b8" value="1" />  
</td><td>  
<div id="taoptionAnswer1q0b8" class="block" style="display:block">False  

</div></td></tr>  
</table></div>  
<!--THIS SUBMIT BUTTON HAS TO BE INCLUDED-->  
<br/><input type="submit" name="submitB" value="SUBMIT ANSWERS"/>  
</div></div>  
</form>  
</div>  
</div>  
</div>  
</body></html>

COMPLETE SOURCE FILE [2]-

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;  charset=utf-8" />
<title>eXe</title>
<style type="text/css">
@import url(base.css);
@import url(content.css);
</style>
<script type="text/javascript" src="common.js"></script>
</head>
<body>
<div id="outer">
<div id="main">
<div id="nodeDecoration">
<p id="nodeTitle">
Part 2</p>
</div>
<div class="TrueFalseIdevice" id="id13">

<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="libot_drag.js"></script>

<div class="iDevice emphasis1">
<img alt="" class="iDevice_icon" src="icon_question.gif" />
<span class="iDeviceTitle">True-False Question</span><br/>
<div class="iDevice_inner">
<div id="ta13_16" class="block" style="display:block">
</div>

<div class="question">
<br/><br/><div id="taquestion0b13" class="block" style="display:block">1: Can a table have more than one primary key?

</div><br/>True <input type="radio" name="option0b13" id="true0b13" onclick="getFeedback(0,2,'0b13','truefalse')"/> 
False <input type="radio" name="option0b13" id="false0b13" onclick="getFeedback(1,2,'0b13','truefalse')"/>
<div id="s0b0b13" style="color: rgb(0, 51, 204);display: none;" even_steven="18">Correct! </div>
<div id="s1b0b13" style="color: rgb(0, 51, 204);display: none;" even_steven="19">Incorrect! </div>
<div id="sfbk0b13" style="color: rgb(0, 51, 204);display: none;"><div id="tafeedback0b13" class="block" style="display:block">
</div></div></div>

<div class="question">

<br/><br/><div id="taquestion1b13" class="block" style="display:block"><span style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff; display: inline ! important; float: none">2: A row in a database can also be called a domain.</span>

</div><br/>True <input type="radio" name="option1b13" id="true1b13" onclick="getFeedback(0,2,'1b13','truefalse')"/> 

False <input type="radio" name="option1b13" id="false1b13" onclick="getFeedback(1,2,'1b13','truefalse')"/>

<div id="s0b1b13" style="color: rgb(0, 51, 204);display: none;" even_steven="19">Incorrect! </div>
<div id="s1b1b13" style="color: rgb(0, 51, 204);display: none;" even_steven="18">Correct! </div>
<div id="sfbk1b13" style="color: rgb(0, 51, 204);display: none;"><div id="tafeedback1b13" class="block" style="display:block">
</div></div>
</div>

<div class="question">

<br/><br/><div id="taquestion2b13" class="block" style="display:block"><span style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff; display: inline ! important; float: none">3: In an OO database objects may inherit some or all of the characteristics of other objects.</span>

</div><br/>True <input type="radio" name="option2b13" id="true2b13" onclick="getFeedback(0,2,'2b13','truefalse')"/> 
False <input type="radio" name="option2b13" id="false2b13" onclick="getFeedback(1,2,'2b13','truefalse')"/>
<div id="s0b2b13" style="color: rgb(0, 51, 204);display: none;" even_steven="18">Correct! </div>
<div id="s1b2b13" style="color: rgb(0, 51, 204);display: none;" even_steven="19">Incorrect!</div>
<div id="sfbk2b13" style="color: rgb(0, 51, 204);display: none;"><div id="tafeedback2b13" class="block" style="display:block">
</div></div>
</div>

<div class="question">

<br/><br/><div id="taquestion3b13" class="block" style="display:block"><span style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff; display: inline ! important; float: none">4: In entity attribute modelling a many to many relationship is represented by M:M.</span>

</div><br/>True <input type="radio" name="option3b13" id="true3b13" onclick="getFeedback(0,2,'3b13','truefalse')"/> 

False <input type="radio" name="option3b13" id="false3b13" onclick="getFeedback(1,2,'3b13','truefalse')"/>

<div id="s0b3b13" style="color: rgb(0, 51, 204);display: none;" even_steven="19">Incorrect! </div>
<div id="s1b3b13" style="color: rgb(0, 51, 204);display: none;" even_steven="18">Correct! </div>
<div id="sfbk3b13" style="color: rgb(0, 51, 204);display: none;"><div id="tafeedback3b13" class="block" style="display:block">

</div></div></div></div></div></div></div></div>
</body></html>

My XSLT-

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
      <!-- Import the identity transformation. -->
      <xsl:import href="identity.xsl"/>

      <xsl:template match="@onclick">

      </xsl:template>
      <xsl:template match="@style"/>

      <xsl:template match="input">
        <xsl:element name="input">
          <xsl:attribute name="type">submit</xsl:attribute>
          <xsl:attribute name="name">submitB</xsl:attribute>
          <xsl:attribute name="value">Submit</xsl:attribute>
          <xsl:apply-templates />
        </xsl:element>
      </xsl:template>

    </xsl:stylesheet>

COMPLETE DESIRED FILE [2]-

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>eXe</title>
<meta http-equiv="Content-Type" content="text/html;  charset=utf-8" />
<style type="text/css">
@import url(base.css);
@import url(content.css);
</style>
<script type="text/javascript" src="common.js"></script>
</head>

<script type="text/javascript" src="APIWrapper.js"></script>
<script type="text/javascript" src="SCOFunctions.js"></script>

<body onload="loadPage()" onunload="unloadPage()"><div id="outer">
<div id="main">

<div id="nodeDecoration">
<p id="nodeTitle">
Part 2</p></div>
<div class="QuizTestIdevice" id="id10">

<script type="text/javascript" src="calculate.js"></script>

<form name="quizForm10" id="quizForm10" action="javascript:calcScore2();">
<div class="iDevice emphasis1">
<img alt="" class="iDevice_icon" src="icon_question.gif" />
<span class="iDeviceTitle">SCORM Quiz</span>
<div class="iDevice_inner">
<div class="passrate" value="50"></div>

<div class="question">
<div id="taquestion0b10" class="block" style="display:block">1: Can a table have more than one primary key?
</div><br/>

<table><tr><td><input type="radio" name="key0b10" value="0" />
</td><td>
<div id="taoptionAnswer0q0b10" class="block" style="display:block">True
</div></td></tr>
<tr><td><input type="radio" name="key0b10" value="1" />
</td><td>
<div id="taoptionAnswer1q0b10" class="block" style="display:block">False
</div></td></tr>
</table></div>

<br/><div class="question">
<div id="taquestion1b10" class="block" style="display:block"><span class="Ques">2: A row in a database can also be called a domain.
</span>
</div><br/>
<table><tr><td><input type="radio" name="key1b10" value="0" />
</td><td>
<div id="taoptionAnswer0q1b10" class="block" style="display:block">True
</div></td></tr>
<tr><td><input type="radio" name="key1b10" value="1" />
</td><td>
<div id="taoptionAnswer1q1b10" class="block" style="display:block">False
</div></td></tr>
</table></div>

<br/><div class="question">
<div id="taquestion2b10" class="block" style="display:block"><span class="Ques">3: In an OO database objects may inherit some or all of the characteristics of other objects.
</span>
</div><br/>
<table><tr><td><input type="radio" name="key2b10" value="0" />
</td><td>
<div id="taoptionAnswer0q2b10" class="block" style="display:block">True
</div></td></tr>
<tr><td><input type="radio" name="key2b10" value="1" />
</td><td>
<div id="taoptionAnswer1q2b10" class="block" style="display:block">False
</div></td></tr>
</table></div>

<br/><div class="question">
<div id="taquestion3b10" class="block" style="display:block"><span class="Ques">4: In entity attribute modelling a many to many relationship is represented by M:M.</span>
</div><br/>
<table><tr><td><input type="radio" name="key3b10" value="0" />
</td><td>
<div id="taoptionAnswer0q3b10" class="block" style="display:block">True
</div></td></tr>
<tr><td><input type="radio" name="key3b10" value="1" />
</td><td>
<div id="taoptionAnswer1q3b10" class="block" style="display:block">False
</div></td></tr>
</table></div>

<br/><input type="submit" name="submitB" value="SUBMIT ANSWERS"/>
</div></div>
</form>
</div></div></div>
</body></html>
Improve this question
2
  • 1
    all are related for converting one XML to another with XSLT XHTML is XML so any examples you find are applicable to your problem. Commented Jul 12, 2012 at 19:22
  • @StephenP Thanks for your help. I'm trying with XSLT only now. Commented Jul 13, 2012 at 10:05

1 Answer 1

Reset to default
1

Everything you read about transforming XML using XSLT is applicable to transforming XHTML, because XHTML is XML. It's hard to see what's difficult about your problem, other than working out how general the solution needs to be: is this the only document that needs to be transformed (if so, why not use a text editor?) or are there others that are similar, and if so how much do they differ?

The general approach to writing a transformation that copies most things but deletes a few things is to write two template rules: a general identity template that copies things you want to copy, and a special rule that matches the things you want to delete.

See here for variations on the theme:

http://www.dpawson.co.uk/xsl/sect2/identity.html

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Thanks a lot for your help. I'm going through the link given by you. Actually this is not the only file which has to be transformed rather there are many but all of them have similar structure and only the Quiz question differs. I can use Text editor but my task is to do it automatically, so I'm doing it through a Java program and XSLT.
These files are containing some quiz questions, so in the sample code I have included only one question while there can be many. First difference between the source and desired HTML files is the 'Javascripts'. I have copied those Javascripts from package B to A, which were not present there and now those 3 Javascripts should be included in the desired HTML file and one javascript has to be excluded from the source file. This remains true for all the HTML files and not affected by the number of questions in the quiz.
Second difference is the desired HTML Body tag should be like <body onload="loadPage()" onunload="unloadPage()"> while in the source it is like <body>. Third difference is there is a Form tag <form name="quizForm8" id="quizForm8" action="javascript:calcScore2();"> in the desired one, which is not there in the source (action event is important). Fourth one is <input type="radio" name="option1b12" id="true1b12" onclick="getFeedback(0,2,'1b12','truefalse')"/> , here I need to eliminate this onclick event.
Last one is that there should be a submit button in the desired file. <input type="submit" name="submitB" value="SUBMIT ANSWERS"/> These rules remain same for all the HTML files. The number of questions and the questions themselves remain the same in both source and desired HTML the only difference is that in source file when I click on True or False then it immediately tells me whether its correct or worng while in the desired one it calculates the score and tells me when click on submit button. Thanking you!
I have written the identity.xsl and included it in the other XSLT file to do the required modifications. I'm able to eliminate the 'onclick' event but the problem is I'm unable to add the required Javascripts and Submit button. One more problem is that I have to remove the style attribute from only under the span tag not from the input tag but my XSLT removes it from everywhere. Please loot at the XSLT.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.