app.html

<div class="ordlogit-app">
    <div class="contain">
        <div class="frame">
            <div id="chart"></div>    
            <aside>
                <div class="phi">
                    <div class="slider-label">$\phi$</div>
                    <div id="slider_0"></div>
                </div>

                <div class="cutpoints">
                    <div>$\kappa_1=$ <span class="cutpoint"></span></div>
                    <div>$\kappa_2=$ <span class="cutpoint"></span></div>
                    <div>$\kappa_3=$ <span class="cutpoint"></span></div>
                </div>
        
                <div class="bars">
                    <div> <span class="simplex"></span>
                        <div id="slider_1" class="slider"></div> <span>$p_1$</span>
                    </div>
                    <div> <span class="simplex"></span>
                        <div id="slider_2" class="slider"></div> <span>$p_2$</span>
                    </div>
                    <div> <span class="simplex"></span>
                        <div id="slider_3" class="slider"></div> <span>$p_3$</span>
                    </div>
                    <div> <span class="simplex"></span>
                        <div id="slider_4" class="slider"></div> <span>$p_4$</span>
                    </div>
                </div>
            </aside>
        </div>


        <style>
            .contain {
                width: 100%;
                margin: 0px auto;
                padding-top: 0px;
                padding-bottom: 20px;
            }
            /* layout */
            .frame {
                display: flex;
                flex-direction: column;
                width: 100%;
                margin: 0 auto;
                align-items: center;
                align-content: space-between;
                /* justify-content: space-around; */
            }
            #chart {
                width: 100%;
            }
            /* Slide bar styles*/
            .phi {
                width: 100%;
                margin: 3.5em auto;
            }
            .cutpoints {
                width: 100%;
                margin: 0 auto 1em auto;
                display: flex;
                justify-content: space-around;
                align-items: flex-end;
            }
            .cutpoints > div {
                text-align: right;
                margin-right: 0.5em;
            }
            .bars {
                width: 100%;
                display: flex;
                justify-content: space-around;
                text-align: right;
            }
            .bars>div>div.slider {
                height: 150px;
                margin: 0;
                padding: 0;
            }
            .bars div .simplex, .bars div span {
                display: inline-block;
                margin-bottom: 0em;
            }
            
        </style>
    </div>

    <link type="text/css" rel="stylesheet" media="screen" href="https://yongfu.name/ordlogit/css-app/page.css">
    <link type="text/css" rel="stylesheet" media="screen" href="https://yongfu.name/ordlogit/css-app/chart.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.3/nouislider.min.css" />
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.3/nouislider.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.2.0/wNumb.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jstat@latest/dist/jstat.min.js"></script>
    <script src="https://yongfu.name/ordlogit/src/js/dist/orderedLogit.js"></script>
    <script src="https://yongfu.name/ordlogit/src/js/chart_config.js"></script>
    <script src="https://yongfu.name/ordlogit/src/js/rand.js"></script>
    <script src="https://yongfu.name/ordlogit/src/js/chart_function.js"></script>
    <script src="https://yongfu.name/ordlogit/src/js/interact.js"></script>

</div>