SOURCE

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>公共品自愿供给模拟实验</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
*{box-sizing:border-box;font-family:system-ui}
body{padding:20px;max-width:900px;margin:0 auto;background:#f5f7fa}
.box{background:#fff;padding:16px;border-radius:10px;margin-bottom:15px;box-shadow:0 1px 4px #0002}
input{padding:8px;width:120px;font-size:16px}
button{padding:8px 14px;background:#2574dd;color:#fff;border:none;border-radius:6px;cursor:pointer;margin:4px}
#log{height:260px;overflow:auto;border:1px solid #ddd;padding:10px;white-space:pre-wrap}
</style>
</head>
<body>
<h2>公共品自愿供给实验（4人小组）</h2>
<div class="box">
<p>规则：每人禀赋10元。捐献x元进公共账户，剩余10-x归自己。公共账户总额×0.5，4人均分。</p>
<p>本轮轮次：<span id="round">1</span> / 6</p>
</div>
<div class="box">
<h4>输入4人捐献金额(0~10)</h4>
A:<input id="p1" type="number" min="0" max="10" value="5">
B:<input id="p2" type="number" min="0" max="10" value="4">
C:<input id="p3" type="number" min="0" max="10" value="6">
D:<input id="p4" type="number" min="0" max="10" value="3">
<br>
<button onclick="calcRound()">提交本轮，计算收益</button>
<button onclick="resetAll()">重置全部实验</button>
</div>
<div class="box">
<h4>实验运行日志</h4>
<div id="log"></div>
</div>
<div class="box">
<canvas id="chart" height="250"></canvas>
</div>
<script>
let round = 1;
const maxRound = 6;
let dataX = [];
let dataTotal = [];
const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx,{
    type:'line',
    data:{
        labels:dataX,
        datasets:[{label:'小组总捐款',data:dataTotal,borderColor:'#2574dd',fill:false}]
    },
    options:{responsive:true}
});
const logDom = document.getElementById("log");
function addLog(text){
    logDom.innerText += text+"\n";
    logDom.scrollTop = logDom.scrollHeight;
}
function calcRound(){
    const p1 = Number(document.getElementById('p1').value);
    const p2 = Number(document.getElementById('p2').value);
    const p3 = Number(document.getElementById('p3').value);
    const p4 = Number(document.getElementById('p4').value);
    const total = p1+p2+p3+p4;
    const publicPool = total * 0.5;
    const perGet = publicPool / 4;
    const earn1 = (10-p1)+perGet;
    const earn2 = (10-p2)+perGet;
    const earn3 = (10-p3)+perGet;
    const earn4 = (10-p4)+perGet;
    addLog(`【第${round}轮】捐献:${p1},${p2},${p3},${p4}｜总捐款${total}，公共分红每人${perGet.toFixed(2)}`);
    addLog(`收益A:${earn1.toFixed(2)} B:${earn2.toFixed(2)} C:${earn3.toFixed(2)} D:${earn4.toFixed(2)}\n`);
    dataX.push(round);
    dataTotal.push(total);
    chart.update();
    round++;
    document.getElementById("round").innerText = round;
    if(round>maxRound){
        addLog("====6轮实验全部结束====");
    }
}
function resetAll(){
    round=1;
    dataX.length=0;
    dataTotal.length=0;
    chart.update();
    logDom.innerText="";
    document.getElementById("round").innerText=1;
}
</script>
</body>
</html>