Making a table of contents style FAQ webpage without duplicating html

Question

I am trying to make an FAQ page on a site, with all the questions placed together similar to a table of contents (e.g. like on Wikipedia). When you click on the question, it jumps you down the page to the question (repeated from above) together with it's answer.

Since the question shows up twice on the page, doing this the obvious way would result in the question showing up twice in the code, which could cause problems if the questions need to be modified and whoever is updating it only changes the code in one place.

Also, it seems kind of illogical to put an anchor tag with a meaningless name before each question/answer pair; if numbers are used, then this again could problems when questions are added or removed.

I guess I'm basically hoping there's a way to store the questions and answers in an array (using PHP or javascript maybe?) or pair of arrays and then for each element in the arrays, put a list item with a generated anchor tag, the question, and its answer. Is this doable, or am I just taking the wrong approach to web development here?

Related side question: is there anyway to style an unordered list to replace the bullets with a "Q:"?

Answer 1

<?php
    $questions = array(
        "Question 1",
        "Question 2",
        "Question 3",
        "Question 4"
    );

    echo '<p>';     // FAQ Menu

    foreach ($questions as $key => $question) {
        echo '<a href="#', $key, '">', $question, '</a><br />';
    }

    echo '</p>';

    // Begin FAQ

    foreach ($questions as $key => $question) {
        echo '<h2><a name="', $key, '">', $question, '</a></h2>';
    }

?>

You can modify the HTML to get the formatting you want. The array key becomes the anchor name, so if you want to change your questions, all you have to do is modify them once in the array.

If you want to separate your questions and answers, you can use this:

<?php
    $questions = array(
        array("Question 1", "Answer 1"),
        array("Question 2", "Answer 2"),
        array("Question 3", "Answer 3"),
        array("Question 4", "Answer 4")
    );

    echo '<p>';

    foreach ($questions as $key => $question) {
        echo '<a href="#', $key, '">', $question[0], '</a><br />';
    }

    echo '</p>';

    foreach ($questions as $key => $question) {
        echo '<h2><a name="', $key, '">', $question[0], '</a></h2>';
        echo '<p>', $question[1], '</p>';
    }

?>

Answer 2

The easiest way to create a table of contents would definitely be to use anchors; easy to update, create, and utilize. If you look at sites such as Wikipedia, they use the anchor-table-of-contents method as well. Is it possible that a client could be editing the webpage? Otherwise, it shouldn't be a huge hassle.

As for your side question, I know it's possible to edit the bullets in a list through CSS and replace them with an image. It would look something like:

ul {
 list-style-position: outside;
 list-style-image: url("image.gif")
 list-style-type: square;
}

More informaiton can be found here: http://www.mediacollege.com/internet/css/ul-list.html