Système_vote

by spgoo

HTML

<script src="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.min.js"></script> 
    <script src="https://jsxgraph.org/distrib/JessieScript.js"></script>  
    <link id="themecss" rel="stylesheet" type="text/css" href="https://www.shieldui.com/shared/components/latest/css/light/all.min.css" />
    <script type="text/javascript" src="https://www.shieldui.com/shared/components/latest/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
    
    <link id="themecss" rel="stylesheet" type="text/css" href="style.css" />
 
<script>
    window.MathJax = {
        tex: {
            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
            displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
            packages: ['base', 'ams']
        },
        options: {
            ignoreHtmlClass: 'tex2jax_ignore',
            processHtmlClass: 'tex2jax_process'
        }
    };
</script>
<script type="text/javascript" id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 <div class="board-container">
            <div id="boxG" class="board" style="width:800px; height:600px;display:block;"></div>
            <div id="boxP0" class="board" style="width:800px; height:600px;display:none;"></div>
            <div id="boxP1" class="board" style="width:800px; height:600px;display:none;"></div>
            <div id="boardExemple" class="board" style="width:800px; height:600px;display:none;"></div>
            <div id="boardExempledetail" class="board" style="position:absolute;top:40px;left:40px;width:800px; height:550px;display:none;"></div>
            <div id="box0" class="board" style="width:800px; height:600px;display:none;"></div>
            <div id="box1" class="board"...

CSS

.boardG {
    width: 400px;
    height: 400px;
    border: 1px solid black;
    background: white;
}   

.serif {
    font-family: "Computer Modern", Times, serif;
}
.sansserif {
    font-family: "Computer Modern Sans", Times, sans-serif;
}
.monospace {
    font-family: "Lucida Console", Courier, monospace;
}
.shaded {
    padding: 8px;
    border: 1px solid #CCC;
    box-shadow: 8px 8px 12px #888;
    border-radius: 6px;
}
div.Wrapper * {
    color: "red";
}
#myDIV {
    color: "red";
    background-color: Transparent;
}
.circle {
    width: 25px;
    height: 25px;
    border: solid 1px #DCDCDC;
    background-color: #DCDCDC;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 2px 2px 1px rgba(1, 1, 1, 0.6);
    -webkit-box-shadow: 10px 10px 5px rgba(1, 1, 0, 0.6);
    -o-box-shadow: 5px 5px 5px rgba(1, 0, 0, 0.6);
    border-radius: 70px;
}
.board-container {
    /* position: relative;*/
    width: 810px;
    height: 500px;
    margin: auto;
}
.container {
    width: 800px;
    margin: auto;
}
.mybutton > button {
  background-color: #5F9EA0;
  border: none;
  color: white;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  box-shadow: 8px 8px 12px #888;
}

.mybuttonh > button {
  background-color: #5F9EA0;
  border: none;
  color: #AE181E;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  box-shadow: 10px 10px 14px #494949;
  cursor:pointer;
}

.input_custom_width1 {
    width: 50px;
}
.no-border {
            border: none;
}

.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Katex-Main, serif;font-size:18px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Katex-Main, serif;font-size:18px;
  font-weight:normal;overflow:hidden;padding:10px...

JavaScript

rougevenitien='#AE181E';
    peche='#ffdfbf';
    cadet='#5F9EA0';
    olivedrab='#6B8E23';
    vert="#069E1C";
    monjaune='#f9f9fb';
    JXG.Options.text.useMathJax = true;
    
    const tab_exemples = {
    "exemple1": {
        "candidats":['A', 'B', 'C'],
        "arrangements":{
            "1":{"arr":['A', 'B', 'C'], "voie":1},
            "2":{"arr":['B', 'C', 'A'], "voie":1}
        },
        "commentaires":"Paradoxe de condorcet : préférences individuelles transitives, préférences collectives non transitives",
        "ref":""
    },
    "plurality_1":{
        "candidats":['A', 'B', 'C', 'D'],
        "arrangements":{
            "1":{"arr":['A', 'B', 'C', 'D'], "voie":420},
            "2":{"arr":['B', 'C', 'D', 'A'], "voie":260},
            "3":{"arr":['C', 'D', 'B', 'A'], "voie":150},
            "4":{"arr":['D', 'C', 'B', 'A'], "voie":170}
        },
        "commentaires":"Wikipedia Plurality",
        "ref":"https://en.wikipedia.org/wiki/Plurality"
    },
    "plurality_2":{
        "candidats":['A', 'B', 'C', 'D'],
        "arrangements":{
            "1":{"arr":['A', 'B', 'C', 'D'], "voie":30},
            "2":{"arr":['B', 'A', 'C', 'D'], "voie":25},
            "3":{"arr":['C', 'A', 'B', 'D'], "voie":15},
            "4":{"arr":['A', 'C', 'D', 'B'], "voie":22},
            "5":{"arr":['D', 'C', 'B', 'A'], "voie":18},
        },
        "commentaires":"",
        "ref":""

    }

}
    

    var boardG = JXG.JSXGraph.initBoard("boxG", {
        pan: {enabled:false},
        boundingbox: [-4,4, 10,-1],
        axis:false,
        withLines:false,
        defaultAxes: {
            x: { ticks: {visible: false} },
            y: { ticks: {visible: false} },
        },
        showNavigation:false,
        showCopyright:false,
        showFullscreen:true
    });
    var boardP0 = JXG.JSXGraph.initBoard("boxP0", {
        pan: {enabled:false},
        boundingbox: [-4,4, 10,-1],
        axis:false,
        withLines:false,
        defaultAxes:...