105 lines
2.8 KiB
HTML
105 lines
2.8 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="500" height="500">
|
|
<defs>
|
|
<marker id="triangle"
|
|
viewBox="0 0 10 10"
|
|
refX="5"
|
|
refY="5"
|
|
markerUnits="strokeWidth"
|
|
markerWidth="10" markerHeight="10"
|
|
orient="auto" overflow="visible" fill='#99C7E7'>
|
|
<path d="M -2 5 L 8 0 L 8 10 z"/>
|
|
</marker>
|
|
|
|
</defs>
|
|
</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.learning_sequences.all %}
|
|
<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.learning_units.all %}
|
|
<div>
|
|
<a target="_blank" href="{% pageurl learning_unit %}">{{ learning_unit.title }}</a>
|
|
</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.5,
|
|
g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
|
|
|
|
|
|
var color = '#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 the arrows
|
|
var arrow = d3.arc()
|
|
.innerRadius(radius * 1.15)
|
|
.padAngle(30 / 360)
|
|
.outerRadius(radius * 1.16);
|
|
|
|
|
|
//Generate groups
|
|
var arcs = g.selectAll("arc")
|
|
.data(pie(data))
|
|
.enter()
|
|
.append("g")
|
|
.attr("class", "arc")
|
|
|
|
|
|
//Generate groups
|
|
var arrows = g.selectAll("arrow")
|
|
.data(pie(data))
|
|
.enter()
|
|
.append("g")
|
|
.attr("class", "arrow")
|
|
.attr("marker-start", "url(#triangle)")
|
|
|
|
var markers = g.selectAll("arrow").attr("transform", "translate(60, 60) rotate(30)")
|
|
|
|
//Draw arc paths
|
|
arcs.append("path")
|
|
.attr("fill", color)
|
|
.attr("d", arc)
|
|
|
|
//Draw arrow paths
|
|
arrows.append("path")
|
|
.attr("fill", color)
|
|
.attr("d", arrow)
|
|
|
|
</script>
|
|
{% endblock %}
|