{% extends "global/Page.html" %}
{% load otree %}

{% block title %}Instructions{% endblock %}

{% block content %}

<p> Welcome to our experiment! In this experiment, you will make investment decisions in a financial market with the same 5 people for 20 rounds. In these rounds, you can earn Points.<b><font color="Red">The exchange rate is 100 Points = 1 Dollar. The maximum payoff is 7 dollars.</font></b></p>

<p><b>Your task</b></p>

<p><b>You and the other five people will act as fund managers.</b> Each of you manages a fund invested by other investors (the experimenter).  At the beginning of the experiment, you start with a fund wealth of 300 Points. You have to decide in each of twenty rounds, <b>what percentage of fund wealth you want to invest at a risk-free rate of 2.5% and the percentage you wish to invest in a stock index.</b> The development of the stock index reflects the price development of a basket of shares and is based on actual historical data. In the last 20 years, this development is characterized by price fluctuations. In this round, <b>the stock index earned a return of 11.0% and has a standard deviation of the returns of 30.2%.</b> </p>

<p>Here are some examples on the likelihood of various return fluctuations of stock index: </p>
<p>In 50 out of 100 cases, the return lies between −9.4% and 31.4%. </p>
<p>In 75 out of 100 cases, the return lies between −23.7% and 45.7%.</p>
<p>In 90 out of 100 cases, the return lies between −38.7% and 60.7%. </p>
<p>In 95 out of 100 cases, the return lies between −48.2% and 70.2%.</p>

<p>To better understand the return distribution with a mean of 11.0% and a standard deviation of 30.2%, please draw 30 times from this distribution by clicking on the “Draw return” button. The draws are independent for each participant. Every time you click on the “Draw return” button, a new return is drawn from the distribution and displayed on the screen. Together, the draws give you a feeling for the stock index changes from round to round.</p>
{% block styles %}
<style>
    @charset "utf-8";
.body {
    text-align: center;
}
.canvas {
    border: 1px solid #000000;
}
.button {
    display: block;
    margin: 0 auto;
}
</style>
{% endblock %}
{% block scripts %}
<canvas class="canvas" id="canvas" width="600" height="600">
	</canvas>
	<input class="button" type="button" value="Draw return" onclick="drawReturn()">
<script Language="JavaScript">
    function getNumberInNormalDistribution(mean, std_dev) {
    return mean + (randomNormalDistribution() * std_dev);
}
function randomNormalDistribution() {
    var u = 0.0,
        v = 0.0,
        w = 0.0,
        c = 0.0;
    do {
        //获得两个（-1,1）的独立随机变量
        u = Math.random() * 2 - 1.0;
        v = Math.random() * 2 - 1.0;
        w = u * u + v * v;
    } while (w == 0.0 || w >= 1.0)
    //这里就是 Box-Muller转换
    c = Math.sqrt((-2 * Math.log(w)) / w);
    //返回2个标准正态分布的随机数，封装进一个数组返回
    //当然，因为这个函数运行较快，也可以扔掉一个
    //return [u*c,v*c];
    return u * c;
}

function calculatePossibility(x) {
    var w = x / 5000;
    var sum = 0;
    for (var i = 1; i <= 5000; i++) {
        var h = (1 / (Math.sqrt(2 * Math.PI) * Math.sqrt(0.302))) * Math.pow(Math.E, -((w * i - 0.11) * (w * i - 0.11)) / (2 * 0.302));
        var area = h * w;
        sum = sum + area;
    }
    return (Math.abs(sum) * 100).toFixed(2) + "%";
}

function calculateY(x) {
    var w = x / 5000;
    var sum = 0;
    var h = (1 / (Math.sqrt(2 * Math.PI) * Math.sqrt(0.302))) * Math.pow(Math.E, -((x - 0.11) * (x - 0.11)) / (2 * 0.302));
    return h;
}
    var pointList = new Array;
    var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.translate(150, 150); //重新设置(0,0)点
//绘制坐标系
function drawAxis() {
    ctx.clearRect(-150, -150, canvas.width, canvas.height); //清空画布
    ctx.save();
    //x 轴
    ctx.beginPath();
    ctx.moveTo(-280, 0);
    ctx.lineTo(-272, 3);
    ctx.lineTo(-272, -3);
    ctx.lineTo(-280, 0);
    ctx.lineTo(280, 0);
    ctx.lineTo(272, 3);
    ctx.lineTo(272, -3);
    ctx.lineTo(280, 0);
    ctx.stroke();
    //y 轴
    ctx.moveTo(0, 280);
    ctx.lineTo(3, 272);
    ctx.lineTo(-3, 272);
    ctx.lineTo(0, 280);
    ctx.lineTo(0, -280);
    ctx.lineTo(3, -272);
    ctx.lineTo(-3, -272);
    ctx.lineTo(0, -280);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}
//绘制点
function drawPoints(x) {
    for (let index = 0; index < x.length; index++) {
        const element = x[index];
        // drawY(element); //这句话是用来生成二维图像的
        if (index == x.length - 1) { //如果是最后添加进来的点，绘制正方形
            ctx.save();
            ctx.fillStyle = "black";
            ctx.fillRect(element - 4, 0 - 4, 8, 8);
            ctx.fillStyle = "yellow";
            ctx.fillRect(element - 3, 0 - 3, 6, 6);
            ctx.restore();
            continue;
        }
        ctx.save();
        ctx.beginPath();
        ctx.arc(element, 0, 3, 0, 2 * Math.PI, true);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();
        ctx.restore();
    }
    ctx.restore();
}
//绘制百分比信息
function drawMessage(x, message) {
    ctx.save();
    ctx.font = "20px Console";
    ctx.fillStyle = "red";
    ctx.fillText(message, x - 25, -30);
    ctx.restore();
}
//绘制平均数信息
function drawAverage(x) {
    ctx.save();
    ctx.shadowColor = "rgba(0,0,0,0.8)";
    ctx.shadowOffsetX = 12;
    ctx.shadowOffsetY = 12;
    ctx.shadowBlur = 15;
    ctx.font = "15px Console";
    ctx.fillStyle = "black";
    ctx.fillText("Average=" + (x * 100).toFixed(2) + "%", 170, 30);
    ctx.restore();
}
//绘制二维图像
function drawY(x) {
    ctx.save();
    //绘制对称轴
    ctx.moveTo(0.11 * 500, -250);
    ctx.lineTo(0.11 * 500, 250);
    ctx.stroke();
    //绘制二维坐标系中的点
    ctx.beginPath();
    ctx.fillStyle = "blue";
    ctx.arc(x, -calculateY(x / 500) * 200, 6, 0, 2 * Math.PI, true);
    ctx.fill();
    ctx.closePath();
    ctx.restore();
}
    //按钮点击事件
function drawReturn() {
    //产生一个新的点
    var newX = getNumberInNormalDistribution(0.11, 0.302);
    //得到这个点的百分比
    var percent = (newX * 100).toFixed(2) + "%";
    //转换到视图中的x值
    var x = newX * 500 //将结果方法一定倍数并显示出来
    pointList.push(x);
    drawAxis(); //绘制坐标轴
    drawPoints(pointList); //绘制点
    drawMessage(pointList[pointList.length - 1], percent); //绘制信息  
}
</script>
{% endblock %}
<p><b>It is important that if you leave halfway, you will not get any payoff.</b></p>
{% next_button %}

{% endblock %}