71 lines
1.7 KiB
HTML
71 lines
1.7 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% load wagtailcore_tags %}
|
|
|
|
{% block body_class %}template-cicle{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="w-full flex mt-6">
|
|
<div class="bg-white flex flex-col w-1/3 m-5">
|
|
<div><a href="{% pageurl page.get_parent.get_parent %}">Zurück zum Lernpfad</a></div>
|
|
|
|
<div class="flex justify-center">
|
|
<svg width="400" height="400"> </svg>
|
|
</div>
|
|
<h1 class="font-bold text-5xl mt-6 mb-4">{{ page.title }}</h1>
|
|
<div class="mt4">{{ page.description }}</div>
|
|
<div class="mt-4">{{ page.goals }}</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 flex-col w-2/3">
|
|
{% for learning_sequence in page.get_children %}
|
|
<div class="p-6 max-w-sm mx-auto bg-white shadow-lg m-4">
|
|
<h2 class="font-bold">{{ learning_sequence.title }}</h2>
|
|
{% for learning_unit in learning_sequence.get_children %}
|
|
<div>
|
|
<h3>{{ learning_unit.title }}</h3>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var data = [5,5,5,5,5];
|
|
|
|
var svg = d3.select("svg"),
|
|
width = svg.attr("width"),
|
|
height = svg.attr("height"),
|
|
radius = Math.min(width, height) / 2,
|
|
g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
|
|
|
|
var color = d3.scaleOrdinal(['#99C7E7']);
|
|
|
|
// Generate the pie
|
|
var pie = d3.pie();
|
|
|
|
// Generate the arcs
|
|
var arc = d3.arc()
|
|
.innerRadius(radius/2.5)
|
|
.padAngle(12/360)
|
|
.outerRadius(radius);
|
|
|
|
//Generate groups
|
|
var arcs = g.selectAll("arc")
|
|
.data(pie(data))
|
|
.enter()
|
|
.append("g")
|
|
.attr("class", "arc")
|
|
|
|
//Draw arc paths
|
|
arcs.append("path")
|
|
.attr("fill", function(d, i) {
|
|
return color(i);
|
|
})
|
|
.attr("d", arc);
|
|
</script>
|
|
|
|
|
|
{% endblock %}
|