Question : Web Flow Charts - HTML??

My boss has asked me to do a web project with a serious of flow charts. For example, it starts with a question, if you click No it pops out with and answer and if you click yes it continues on the flow chart.. The answer also have to be recorded and deisplayed when finished. Can this be done via HTML & ASP???

Any help or ideas iare really appreciated.

Answer : Web Flow Charts - HTML??

You don't need to use flash, and JavaScript could do a better job sometimes.

The idea of clicking a button to show / hide elements can be implemented in so many ways and it's easy using jQuery.

I've attached a simplified example that uses jQuery to slide out a div with a chart image when you click Yes button, and it will also hide the div that contains the buttons.

Hope this helps

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:

           
           
             <!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>
    <style>
        #chart {display: none;}
        a.btn 
        {
            display:inline-block;
            margin:10px;
            padding:5px 10px;
            background:#666;
            color:#fff;
            text-decoration:none;
            font:bold 12px Arial, Helvetica, Serif;
        }
    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript">
            function showHide(x,y) {
                var el1 = document.getElementById(x);
                var el2 = document.getElementById(y);
                $(el2).slideDown("slow");
                $(el1).slideUp("slow");
            }
    </script>
</head>
<body>
    <div id="button">
        <a href="#" class="btn" id="yesBtn" onclick="showHide('button', 'chart');return false">Yes</a>
        <a href="#" class="btn">No</a>
    </div>
    <div id="chart">
        <img src="http://media.juiceanalytics.com/images/FusionChart.png" />
    </div>
</body>
</html>

           
         