I'm not allowed to comment so I'll give it real shot...As far as readability: Your html could look better showing hierarchic relation.
<html>
<head>
<title>Words</title>
</head>
<body>
<div>
<h1>Large Header</h1>
<ul>
<li>E1</li>
<li>E2</li>
</ul>
</div>
</body>
</html>
My JS advice might be seen as a personal preference, but instead of doing this
function chooseKnakk() {
$('Global Persona Type').innerHTML = $('knakkChoice').value;
///if choice is a knakk
if ($('knakkChoice').selectedIndex === 1) {
$('peapodKnakkFacet').removeClass('hidden');
}
///if choice is company or web
if ($('knakkChoice').selectedIndex === 2 || $('knakkChoice').selectedIndex === 3) {
$('dplay').removeClass('hidden');
$('peapodContentFacet').removeClass('hidden');
}
///if building methodCall
if ($('knakkChoice').selectedIndex === 4) {
$('choiceflow').removeClass('hidden');
$('peapodKnakkFacet').removeClass('hidden');
}
///if building challenge
if ($('knakkChoice').selectedIndex === 5) {
$('GP Photo').removeClass('hidden');
$('gpPhotoLabel').removeClass('hidden');
}
calling multiple ifs you could either use if else if statements or use a switch. Like so...
if(condition 1 is true){
//do stuff
} else if(condition 2 is true){
//do stuff
} else (condition 3 is true){
//do stuff
}
or...
switch (value to investigate) {
case 1:
//do stuff
break;
case 2:
//do stuff and maybe case: 3 stuff too!
case 3:
//do at least this stuff, but maybe case: 2 as well!
break;
default:
//this is optional for when no case is met
}
You could achieve a result equivalent to my example if else with a "traditional" switch with break; statements concluding each case, however, I intentionally left off the break at the second case to show that if case: 1 returns false, but case: 2 is true, after it makes it's way through case: 2 it WILL proceed to check case: 3. If that is true as well you'll have multiple cases met so make sure that's what you intend. Lastly, you could consider dropping brackets enclosing single statement ifs the aren't mandatory, or you could use short if like var = (condition) ? (true action) : (false action); but some argue that's even less readable. I don't use them. You also have some areas where you break from your own style. Having multiple-needless blank lines makes it "look" confusing. Keep related stuff together provide one blank line when you feel it shows a new process or event. I also prefer to comment to the right as opposed to above. If there needs to be multiple things explained like a function's or variable's purpose it can look quite uniform that way(IMHO), but I've seen it both ways. Hope that helps at least as far as readability.
