tags:

views:

166

answers:

2

Hi,

Below is my way, albeit a basic way of creating a Decision Tree...The problem is the CSS is getting way out of control and the code is just awful...is there a better way?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#SwitchPicker .title{
width: 100%;
margin:auto;
text-align:center;
}
#SwitchPicker .twinanswer{
width:400px;
background:url(images/2ans.jpg) no-repeat;
margin:auto;
height:110px;
}
#SwitchPicker .answer-bottom-left {
padding-top:90px;
width:50%;
float:left;
}
#SwitchPicker .answer-bottom-right {
padding-top:90px;
width:50%;
float:left;
text-align:right;
}
#SwitchPicker .trioanswer{
width:400px;
background:url(images/3ans.jpg) no-repeat;
margin:auto;
height:110px;
}
#SwitchPicker .trio-answer-bottom-left {
padding-top:90px;
width:33%;
float:left;
}
#SwitchPicker .trio-answer-bottom-mid {
padding-top:90px;
width:33%;
float:left;
text-align:center;
}
#SwitchPicker .trio-answer-bottom-right {
padding-top:90px;
width:33%;
float:left;
text-align:right;
}
#SwitchPicker .answer{
width:50%;
float:left;
margin:auto;
text-align:center;
}
#SwitchPicker .answers{
width:40%;
padding-left:30%;
padding-right:30%;
margin:auto;
}
#SwitchPicker .detail {
display:none;
}
#SwitchPicker .answer-left {
margin-top:10px;
width:50%;
padding-left:13%;
}
#SwitchPicker .answer-right {
margin-top:10px;
width:50%;
padding-left:37%;
}
#SwitchPicker .answer-left-left {
margin-top:10px;
width:50%;
padding-left:3%;
}
#SwitchPicker .answer-left-right {
margin-top:10px;
width:50%;
padding-left:23%;
}
#SwitchPicker .answer-mid-left {
margin-top:10px;
width:50%;
padding-left:14%;
}
#SwitchPicker .answer-mid-right {
margin-top:10px;
width:50%;
padding-left:36%;
}
#SwitchPicker .answer-right-left {
margin-top:10px;
width:50%;
padding-left:27%;
}
#SwitchPicker .answer-right-right {
margin-top:10px;
width:50%;
padding-left:48%;
}
</style>
</head>
<?php
// Managed or Unmanaged
if ($_GET['st'] == "managed"){
$a1 = "answer-left";
$switch_type = $_GET['st'];
}
else if ($_GET['st'] == "unmanaged"){
$a1 = "answer-right";
$switch_type = $_GET['st'];
}
else if ($_GET['st'] == "smart"){
$a1 = "answer-mid";
$switch_type = $_GET['st'];
}
else {
echo "";
}
// Fast Ethernet or Gigabit
if (($_GET['st'] == "managed") && ($_GET['ss'] == 100)){
$a2 = "answer-left-left";
$switch_type = $_GET['st'];
$switch_speed = $_GET['ss'];
}
else if (($_GET['st'] == "managed") && ($_GET['ss'] == 1000)){
$a2 = "answer-left-right";
$switch_type = $_GET['st'];
$switch_speed = $_GET['ss'];
}
else if (($_GET['st'] == "unmanaged") && ($_GET['ss'] == 100)){
$a2 = "answer-right-left";
$switch_type = $_GET['st'];
$switch_speed = $_GET['ss'];
}
else if (($_GET['st'] == "unmanaged") && ($_GET['ss'] == 1000)){
$a2 = "answer-right-right";
$switch_type = $_GET['st'];
$switch_speed = $_GET['ss'];
}
else if (($_GET['st'] == "smart") && ($_GET['ss'] == 100)){
$a2 = "answer-mid-left";
$switch_type = $_GET['st'];
$switch_speed = $_GET['ss'];
}
else if (($_GET['st'] == "smart") && ($_GET['ss'] == 1000)){
$a2 = "answer-mid-right";
$switch_type = $_GET['st'];
$switch_speed = $_GET['ss'];
}
else {
echo "";
}
?>
<body id="SwitchPicker">
<div class="title">Small Business Decision Tree</div>
<div class="title">Managed or Unmanaged</div>
<div class="trioanswer">
  <div class="trio-answer-bottom-left"><a href="index.php?st=managed">Managed</a></div>
  <div class="trio-answer-bottom-mid"><a href="index.php?st=smart">Smart</a></div>
  <div class="trio-answer-bottom-right"><a href="index.php?st=unmanaged">Unmanaged</a></div>
</div>
<? 
if (isset($_GET['st'])) {
echo"
  <div class=\"" .$a1. "\">
    <div class=\"title\">Switch Speed?</div>
     <div class=\"twinanswer\">
      <div class=\"answer-bottom-left\"><a href=\"index.php?st=" .$switch_type. "&ss=100\">Fast Ethernet (10/100)</a></div>
      <div class=\"answer-bottom-right\"><a href=\"index.php?st=" .$switch_type. "&ss=1000\">GigabitEthernet (1000)</a></div>
        </div>
    </div>";
    }
else {
echo "";
}
?>
<?
if (isset($_GET['ss'])) {
echo"
    <div class=\"" .$a2. "\">
    <div class=\"title\">Switch Size?</div>
     <div class=\"twinanswer\">
      <div class=\"answer-bottom-left\"><a href=\"index.php?st=" .$switch_type. "&ss=" .$switch_speed. "&ssize=desk\">Desktop</a></div>
      <div class=\"answer-bottom-right\"><a href=\"index.php?st=" .$switch_type. "&ss=" .$switch_speed. "&ssize=rack\">Rack-mountable</a>   </div>
        </div>
    </div>";
    }
else {
echo "";
}
?>
</body>
</html>

Thanks, B.

+4  A: 

At first you could take the lines

$switch_type = $_GET['st'];
$switch_speed = $_GET['ss'];

out of the conditions, they are the same everywhere. Just do it once before or after the if/elses.

Furthermore I see, that each sub-part of $a2 depends on a specific condition. Maybe you can construct it the following (pseudo-code) way:

...
//$a2 always starts the same
$a2 = "answer";

// Type of line
switch($_GET['st']) {
  case "managed":
    $a2 = $a2 + "-left"; break;
  case "unmanaged":
    $a2 = $a2 + "-right"; break;
  case "smart":
    $a2 = $a2 + "-mid"; break;
}

// speed of line
switch($_GET['ss']) {
  case 100:
    $a2 = $a2 + "-left"; break;
  case 1000:
    $a2 = $a2 + "-right"; break;
}
....

After that $a2 should hold your combined values like 'answer-left-right' and so on. A similar approach could be done with $a1 but I chose $a2 for the example as it's better suited here.

Kosi2801
+1. CSS can be refactored in similar manner (margin-top:10px; width:50%; are repeated multiple times)
artemb
problem is the positioning of the next branch of the tree once the selection has been made...currently done using different amounts of padding-left in the css...in my example posted I have to use varying amounts of padding-left to get the possitioning just right...
Bift
that is why there is .left-left , .left-right and .left-mid in the css
Bift
You could use a similar algorithm to calculate the padding for the css and write out the used style directly into the div-tag using the style-attribute.
Kosi2801
A: 

I've used associative arrays for this in the past.

In your case, you should be parsing $_GET["st"] & $_GET["ss"] at the top of the script. So you can grab those into two variables $st and $ss (and you should be doing validation on them as well!). Taken that as given, you can come up with something like:

$st_choices = array (
    'managed'    => array (
        '1000'         =>  array (
            'key1'          => 'val1',
            'key2'          => 'val2'
         );
     ),
     'a1'        => 'answer-left',
     'a2'        => 'another-value'

     /** ... **/
);

Then, you use a lookup function to access the array.

Adding more elements means simply adding to the array in the format above, instead of adding more if/else if/else branches.

function return_details($st, $ss) {
    $vals = array();

    if (isset($st_choices[$st]) && isset($st_choices[$st][$ss])) {
        $vals['a1'] = $st_choices[$st]["a1"];
        $vals['a2'] = $st_choices[$st]["a2"];
        $vals['key1'] = $vals[$st][$ss]['key1'];
    }
}

Depending on your situation, you may need to wrap those assignments in isset() also.

Phil