Rosary app for the Palm Pre

I'm trying to create an app for the Palm Pre. It is a prayer app, more specifically a rosary app. If you are not a Catholic, a rosary is kind of like a necklace on which you count beads.

What I'm trying to do:

• You click on one of 4 buttons to select one of 4 sets of "mysteries".
• The page then displays

• the title of the set of mysteries (except in a few cases)
• the title of the individual mystery
• the prayer that goes with it
• the bead you are on
• Each page has a button, "Next Bead", which you click to advance to the next prayer and bead.

The routine goes like this:

1. Before the mysteries
• Apostles Creed, Our Father, three Hail Marys, Glory Be, and Fatima prayer
2. Then, for each individual mystery

• Our Father, ten Hail Marys, Glory Be, and Fatima prayer
• this cycle will repeat 5 times for each of 5 mysteries.
3. After the mysteries - Hail Holy Queen

• First, I'm not sure I have the best set up for the buttons at the beginning. With the phone SDK, the phone will have to 'listen' for which button is pressed. Did I set this up right?

• Second, I have all of these if statements set up to pick which prayer occurs with which bead. Is this the most efficient way to do this?

All thoughts are appreciated.

<script type="text/javascript">

var chaplet=new Array("The Joyful Mysteries","The Luminous Mysteries","The
Sorrowful Mysteries","The Glorious Mysteries");
var mystery=new Array();
mystery[0]=new Array("Annunc","Visit","The Nativ","Present","Temple");
mystery[1]=new Array("Baptism","Wedding", "Kingdom","Transfig","Eucharist");
mystery[2]=new Array("Agony","Scourging","Crowning","Carrying", "Crucif");
mystery[3]=new Array("Resurr","Ascension","Spirit","Assumption","Coronation");
var creed="I believe..."
var ourFather="Hallowed be"
var hailMary="Blessed are thou"
var gloryBe="As it was"
var fatima="Oh my Jesus"
var hailHolyQueen="To thee do we cry"
var dec=0;
var mys=0;

{
eventSrcID=(event.srcElement)?event.srcElement.id:'undefined';
if (eventSrcID=='joy') mys=0;
if (eventSrcID=='lum') mys=1;
if (eventSrcID=='sor') mys=2;
if (eventSrcID=='glo') mys=3;

{
div1.innerHTML="Apostles Creed";
div2.innerHTML="";
div3.innerHTML="<p>"+creed+"</p>";
div4.innerHTML="Cross";
}
{
div1.innerHTML="Our Father";
div2.innerHTML="";
div3.innerHTML="<p>"+ourFather+"</p>";
};

{
div1.innerHTML="For Faith, Hope and Charity";
div2.innerHTML="";
div3.innerHTML="<p>"+hailMary+"</p>";
};

{
div1.innerHTML="Glory Be";
div2.innerHTML="";
div3.innerHTML="<p>"+gloryBe+"</p>";
};

{
div1.innerHTML="Fatima Prayer";
div3.innerHTML="<p>"+fatima+"</p>";
};

{
div1.innerHTML="Hail Holy Queen";
div2.innerHTML="";
div3.innerHTML="<p>"+hailHolyQueen+"</p>";
div4.innerHTML="Medal";
};

{

div1.innerHTML="<p>"+chaplet[mys]+"</p>";
div2.innerHTML="<p>"+mystery[mys][dec]+"</p>";

{
div3.innerHTML="<p>"+ourFather+"</p>";
};

{
div3.innerHTML="<p>"+hailMary+"</p>";
};

{
div3.innerHTML="<p>"+gloryBe+"</p>";
};

{
div3.innerHTML="<p>"+fatima+"</p>";
};

};
};
</script>
<body>
<div id="div1">
<input type="button" id="joy" value="The Joyful Mysteries" onclick="nextBead
()" /><br />
</div>
<div id="div2">
<input type="button" id="lum" value="The Luminous Mysteries" onclick="nextBead
()" /><br />
</div>
<div id="div3">
<input type="button" id="sor" value="The Sorrowful Mysteries" onclick="nextBead
()" /><br />
</div>
<div id="div4">
<input type="button" id="glo" value="The Glorious Mysteries" onclick="nextBead
()" /><br />
</div>
<div id="div5">
</div>
</body>

• I'd rather not answer this one :O, but I'll give you one hint: switch. Jun 9, 2011 at 15:42
• That's a fun comment @Steven Jeuris :p Aug 31, 2011 at 16:03

IMHO the code really needs a lot of work.

• Use array literals to construct your arrays:

var chaplet = ["The Joyful Mysteries","The Luminous Mysteries" /* ... */ ];
var mystery = [
["Annunc","Visit","The Nativ","Present","Temple"],
["Baptism","Wedding", "Kingdom","Transfig","Eucharist"]
// ...
];

• There is no point in putting strings into variables if you don't use them multiple times. There is a point if you want to internationalize the App. In that case put all strings into a data structure, that can easily replaced with different languages:

var strings = {
joyful_mysteries: "The Joyful Mysteries",
luminous_mysteries: "The Luminous Mysteries",
// etc.
};

• div1, div2, etc. are very bad choices for ids. Use meaningful names.

• Don't write the <p> elements. Leave them out, or use them instead of divs directly in your HTML. If you use them to change the distances between the elements, then use the style sheet for that instead.

• Put the strings for divs 1 and 2 and beads one to seven and for div3 for all beads into arrays, too. And look into not repeating the texts and code of div4 either.

There is much more that could be suggested, but you should work on these points first, and then post a new question, when you've done that.

EDIT:

BTW, something completely else: Have you actually run your code? I just tried it for the first time, and it has several syntax errors (extra ; before else).

Also you seem to use the Internet Explorer event model. I'm not familiar with Palm Pre, but I doubt it uses the IE model and I believe it would be better to use the standard DOM model. Don't use IE for testing, or you will learn it's non-standard behavior.

• Hi, thanks for your answer. As you can probably tell, I am a total beginner. Question about the divs. They were set up to hold 1. the set of mysteries; 2. the individual mystery; 3. the prayer, and 4. the bead count. However, I first use the divs to hold the selection buttons to pick the set of mysteries to do. How do I achieve the result without putting the buttons into the divs? Jun 17, 2011 at 18:55
• I'm not quite sure what you want to achieve, but I'd say, put the buttons in a separate div and hide it when you don't need them. See also my edit. Jun 18, 2011 at 12:50

You may want to consider indexing some of your variables into an array, with the contents of the array being additional arrays that have the strings that you'll then set.