Skip to content
Snippets Groups Projects
Commit aee1213f authored by Rebecca Müller's avatar Rebecca Müller
Browse files

Add new file

parent e46a3454
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 495 additions and 0 deletions
index.html 0 → 100644
+ 495
− 0
View file @ aee1213f
<!DOCTYPE html>
<head>
<link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
</head>
<div class="content">
<h1>Gamification in der Fertigung</h1>
<h2>Eignung von Spiel-Design-Elementen anhand von Kriterien</h2>
<p>
Wählen Sie alle oder ausgewählte Kriterien eines Hauptkriteriums aus. Unter Elemente können Sie sehen welche Spiel-Design-Elemente passend zu Ihren ausgewählten Kriterien geeignet sind.
Wählen Sie ein angezigtes Element aus, um unter Beispiele kurze Erklärungstexte und grafische Besipiele zu sehen.
</p>
<div class="grid-container1">
<!-- Column Main criteria Safety-->
<div>
<p>
<label><input id="h1" type="checkbox" onchange="toggleCriteria()"> </label>&nbsp<span>Sicherheit</span>
</p>
<!-- Container criteria for main criterion Safety -->
<div id="CriteriaOneContainer">
<div>
<label><input id="criteria11" type="checkbox" class="criteria h1" onchange="criteriaOnChange1()"> </label>&nbsp<span>Geringe bis keine Interaktion</span>
</div>
<div>
<label><input id="criteria12" type="checkbox" class="criteria h1" onchange="criteriaOnChange1()"> </label>&nbsp<span>Ablenkung so gering wie möglich</span>
</div>
</div>
</div>
<!-- Column Main criteria Personality-->
<div>
<p>
<label><input id="h2" type="checkbox" onchange="toggleCriteria()"> </label>&nbsp<span>Persönlichkeit</span>
</p>
<!-- Container criteria for main criterion Personlaity -->
<div id="CriteriaTwoContainer">
<div>
<label><input id="criteria21" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()"> </label>&nbsp<span>Hohe Geduld und hohe Kompetitivität</span>
</div>
<div>
<label><input id="criteria22" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()"> </label>&nbsp<span>Spielertyp: Achiever</span>
</div>
<div>
<label><input id="criteria23" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()"> </label>&nbsp<span>Spielertyp: Explorer</span>
</div>
<div>
<label><input id="criteria24" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()"> </label>&nbsp<span>Spielertyp: Socialiser</span>
</div>
<div>
<label><input id="criteria25" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()"> </label>&nbsp<span>Spielertyp: Killer</span>
</div>
</div>
</div>
<!-- Column Main criteria Motivation-->
<div>
<p>
<label><input id="h3" type="checkbox" onchange="toggleCriteria()"> </label>&nbsp<span>Motivation</span>
</p>
<!-- Container criteria for main criterion Motivation -->
<div id="CriteriaThreeContainer">
<div>
<label><input id="criteria31" type="checkbox" class="criteria h3" onchange="criteriaOnChange3()"> </label>&nbsp<span>Förderung des Kompetenzerlebens</span>
</div>
<div>
<label><input id="criteria32" type="checkbox" class="criteria h3" onchange="criteriaOnChange3()"> </label>&nbsp<span>Förderung der Aufgabenbedeutsamkeit</span>
</div>
<div>
<label><input id="criteria33" type="checkbox" class="criteria h3" onchange="criteriaOnChange3()"> </label>&nbsp<span>Erleben sozialer Eingebundenheit</span>
</div>
</div>
</div>
<!-- Column Main criteria Generation-->
<div>
<p>
<label><input id="h4" type="checkbox" onchange="toggleCriteria()"> </label>&nbsp<span>Generation</span>
</p>
<!-- Container criteria for main criterion Generation -->
<div id="CriteriaFourContainer">
<div>
<label><input id="criteria41" type="checkbox" class="criteria h4" onchange="criteriaOnChange4()"> </label>&nbsp<span>Generation X: 16 - 24 Jahre</span>
</div>
<div>
<label><input id="criteria42" type="checkbox" class="criteria h4" onchange="criteriaOnChange4()"> </label>&nbsp<span>Generation Y: 25 - 40 Jahre</span>
</div>
<div>
<label><input id="criteria43" type="checkbox" class="criteria h4" onchange="criteriaOnChange4()"> </label>&nbsp<span>Generation Z: über 40 Jahre</span>
</div>
</div>
</div>
</div>
<!-- Grid Container Elements & Graph -->
<div class="grid-container-elementsandrgraph">
<!-- Container Elements Grid -->
<div class="container-grid-elements">
<!-- Grid Container Elements -->
<div class="grid-container2">
<!-- Points -->
<div class="progressbar" onclick="setActive(this,'points')">
<div class="outer">
<div class="inner">
<div class="number" id="number">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
<defs>
<linearGradient id="GradientColor1">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="80" cy="80" r="70" stroke-linecap="round" stroke="url('#GradientColor1')" stroke-width="20px" stroke-dasharray="440" stroke-dashoffset="440" />
</svg>
<p>
Punkte
</p>
</div>
<!-- Badges -->
<div class="progressbar" onclick="setActive(this, 'badge' )">
<div class="outer">
<div class="inner">
<div class="number" id="number">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
<defs>
<linearGradient id="GradientColor2">
<stop offset="0%" stop-color="#00fff7" />
<stop offset="100%" stop-color="#0011ff" />
</linearGradient>
</defs>
<circle cx="80" cy="80" r="70" stroke-linecap="round" stroke="url('#GradientColor2')" stroke-width="20px" stroke-dasharray="440" stroke-dashoffset="440" />
</svg>
<p>
Abzeichen
</p>
</div>
<!-- Progressbar -->
<div class="progressbar" onclick="setActive(this, 'progressBar' )">
<div class="outer">
<div class="inner">
<div class="number" id="number">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
<defs>
<linearGradient id="GradientColor3">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="80" cy="80" r="70" stroke-linecap="round" stroke="url('#GradientColor3')" stroke-width="20px" stroke-dasharray="440" stroke-dashoffset="440" />
</svg>
<p>
Fortschrittsanzeige
</p>
</div>
<!-- Leaderboards -->
<div class="progressbar" onclick="setActive(this, 'ranking' )">
<div class="outer">
<div class="inner">
<div class="number" id="number">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
<defs>
<linearGradient id="GradientColor4">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="80" cy="80" r="70" stroke-linecap="round" stroke="url('#GradientColor4')" stroke-width="20px" stroke-dasharray="440" stroke-dashoffset="440" />
</svg>
<p>
Bestenlisten
</p>
</div>
<!-- Level -->
<div class="progressbar" onclick="setActive(this, 'level' )">
<div class="outer">
<div class="inner">
<div class="number" id="number">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
<defs>
<linearGradient id="GradientColor5">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="80" cy="80" r="70" stroke-linecap="round" stroke="url('#GradientColor5')" stroke-width="20px" stroke-dasharray="440" stroke-dashoffset="440" />
</svg>
<p>
Level
</p>
</div>
<!-- Narrative -->
<div class="progressbar" onclick="setActive(this, 'narrativ' )">
<div class="outer">
<div class="inner">
<div class="number" id="number">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
<defs>
<linearGradient id="GradientColor6">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="80" cy="80" r="70" stroke-linecap="round" stroke="url('#GradientColor6')" stroke-width="20px" stroke-dasharray="440" stroke-dashoffset="440" />
</svg>
<p>
Narrativ
</p>
</div>
<!-- Avatar -->
<div class="progressbar" onclick="setActive(this, 'avatar' )">
<div class="outer">
<div class="inner">
<div class="number" id="number">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
<defs>
<linearGradient id="GradientColor7">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="80" cy="80" r="70" stroke-linecap="round" stroke="url('#GradientColor7')" stroke-width="20px" stroke-dasharray="440" stroke-dashoffset="440" />
</svg>
<p>
Avatar
</p>
</div>
<!-- NPC -->
<div class="progressbar" onclick="setActive(this,'nonPlayerCharacter')">
<div class="outer">
<div class="inner">
<div class="number" id="number">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="160px">
<defs>
<linearGradient id="GradientColor8">
<stop offset="0%" stop-color="#e91e63" />
<stop offset="100%" stop-color="#673ab7" />
</linearGradient>
</defs>
<circle cx="80" cy="80" r="70" stroke-linecap="round" stroke="url('#GradientColor8')" stroke-width="20px" stroke-dasharray="440" stroke-dashoffset="440" />
</svg>
<p>
Nicht-Spieler-Charaktere
</p>
</div>
</div>
</div>
<div class="graph">
<p> Test </p>
<div>
<canvas id="myChart"></canvas>
</div>
</div>
</div>
<!-- Container for Examples -->
<div class="examples">
<p>
Beispiele
</p>
<!-- SVG Progressbar -->
<div class="svgContainer" id="progressBar">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="658" height="140" viewBox="0 0 658 140">
<defs>
<clipPath id="clip-Fortschrittsanzeige">
<rect width="658" height="140" />
</clipPath>
</defs>
<g id="Fortschrittsanzeige" clip-path="url(#clip-Fortschrittsanzeige)">
<rect width="658" height="140" fill="none" />
<g id="Rechteck_1" data-name="Rechteck 1" transform="translate(17 41)" fill="#fff" stroke="#000" stroke-width="1">
<rect width="546" height="52" stroke="none" />
<rect x="0.5" y="0.5" width="545" height="51" fill="none" />
</g>
<g id="Rechteck_2" data-name="Rechteck 2" transform="translate(17 41)" stroke="#000" stroke-width="1">
<rect width="273" height="52" stroke="none" />
<rect x="0.5" y="0.5" width="272" height="51" fill="none" />
</g>
<text id="_50_" data-name="50 %" transform="translate(579 78)" font-size="27" font-family="SegoeUI, Segoe UI">
<tspan x="0" y="0">50 %</tspan>
</text>
</g>
</svg>
</div>
<!-- SVG Badge -->
<div class="svgContainer" id="badge">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="153" height="132" viewBox="0 0 153 132">
<defs>
<clipPath id="clip-Abzeichen">
<rect width="153" height="132" />
</clipPath>
</defs>
<g id="Abzeichen" clip-path="url(#clip-Abzeichen)">
<rect width="153" height="132" fill="none" />
<g id="Ellipse_1" data-name="Ellipse 1" transform="translate(23 13)" fill="#fff" stroke="#000" stroke-width="3">
<circle cx="53.5" cy="53.5" r="53.5" stroke="none" />
<circle cx="53.5" cy="53.5" r="52" fill="none" />
</g>
<path id="Icon_material-star" data-name="Icon material-star" d="M32.482,48.019l18.22,11L45.867,38.29l16.1-13.945-21.2-1.8L32.482,3,24.2,22.547,3,24.345,19.1,38.29,14.262,59.016Z" transform="translate(44.018 35.492)" />
</g>
</svg>
</div>
<!-- SVG Avatar -->
<div class="svgContainer" id="avatar">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="205" height="139" viewBox="0 0 205 139">
<defs>
<clipPath id="clip-Avatar">
<rect width="205" height="139" />
</clipPath>
</defs>
<g id="Avatar" clip-path="url(#clip-Avatar)">
<rect width="205" height="139" fill="none" />
<g id="Icon_ionic-md-man" data-name="Icon ionic-md-man" transform="translate(8.906 18.75)">
<path id="Pfad_1" data-name="Pfad 1" d="M23.536,18.567a8.158,8.158,0,1,0-8.158-8.158A8.131,8.131,0,0,0,23.536,18.567Z" transform="translate(6.931)" />
<path id="Pfad_2" data-name="Pfad 2" d="M38.647,8.086H22.286c-6.168,0-10.193,5.424-10.193,10.586V43.519a3.4,3.4,0,1,0,6.78,0V20.553h1.312V83.021c0,6.649,9.186,6.431,9.405,0v-36h1.75V83.043c.372,6.824,9.405,6.168,9.405-.022V20.553H41.84V43.519a3.5,3.5,0,1,0,7,0V18.672C48.84,13.532,44.793,8.086,38.647,8.086Z" transform="translate(0 12.318)" />
</g>
<path id="Icon_awesome-eye" data-name="Icon awesome-eye" d="M31.606,14.293A17.707,17.707,0,0,0,15.9,4.5,17.709,17.709,0,0,0,.192,14.294a1.786,1.786,0,0,0,0,1.611A17.707,17.707,0,0,0,15.9,25.7,17.709,17.709,0,0,0,31.606,15.9,1.786,1.786,0,0,0,31.606,14.293ZM15.9,23.049a7.95,7.95,0,1,1,7.95-7.95A7.95,7.95,0,0,1,15.9,23.049ZM15.9,9.8a5.262,5.262,0,0,0-1.4.209A2.642,2.642,0,0,1,10.809,13.7,5.288,5.288,0,1,0,15.9,9.8Z" transform="translate(87.102 23.666)" />
<path id="Icon_ionic-ios-color-palette" data-name="Icon ionic-ios-color-palette" d="M30.241,24.462a3.284,3.284,0,0,0-1.73-.633,2.574,2.574,0,0,1-1.589-.7,1.949,1.949,0,0,1,0-3.08l2.13-1.891a6.846,6.846,0,0,0,0-10.491A13.518,13.518,0,0,0,20.067,4.5,17,17,0,0,0,8.9,8.726,12.319,12.319,0,0,0,8.9,27.6a16.462,16.462,0,0,0,10.751,3.9h.12a15.824,15.824,0,0,0,10.462-3.684A2.374,2.374,0,0,0,30.241,24.462Zm-21.8-9.274a2.25,2.25,0,1,1,2.25,2.25A2.248,2.248,0,0,1,8.438,15.188Zm2.813,8.859A2.25,2.25,0,1,1,13.5,21.8,2.248,2.248,0,0,1,11.25,24.047Zm4.5-11.32A2.25,2.25,0,1,1,18,10.477,2.248,2.248,0,0,1,15.75,12.727Zm5.063,15.4a3.375,3.375,0,1,1,3.375-3.375A3.376,3.376,0,0,1,20.813,28.125ZM22.5,13.5a2.25,2.25,0,1,1,2.25-2.25A2.248,2.248,0,0,1,22.5,13.5Z" transform="translate(85.002 50.666)" />
<g id="Icon_ionic-md-woman" data-name="Icon ionic-md-woman" transform="translate(134.604 18.757)">
<path id="Pfad_3" data-name="Pfad 3" d="M18.36,15.709,11.475,39.371c-1.475,5.173,4.847,7.192,6.393,2.337l6.159-21.824h1.733L15.175,58.223h9.882V87.035a3.75,3.75,0,1,0,7.493,0V58.223h2.342V87.035a3.64,3.64,0,1,0,7.259,0V58.223H52.314L41.5,19.883h1.967l6.159,21.824c1.522,4.968,7.8,2.836,6.393-2.314L49.129,15.709c-.937-2.677-4.262-7.4-9.835-7.623H28.218A11.091,11.091,0,0,0,18.36,15.709Z" transform="translate(0 11.795)" />
<path id="Pfad_4" data-name="Pfad 4" d="M30.963,10.16a7.77,7.77,0,1,0-15.536,0,7.77,7.77,0,1,0,15.536,0Z" transform="translate(10.525)" />
</g>
<path id="Icon_awesome-glasses" data-name="Icon awesome-glasses" d="M33.788,16.868,31.119,6.173a5.176,5.176,0,0,0-6.662-3.657l-.9.3a.941.941,0,0,0-.6,1.191l.3.893a.941.941,0,0,0,1.191.6l.776-.258a2.517,2.517,0,0,1,1.952.1,2.332,2.332,0,0,1,1.2,1.52l2.264,9.053a16.288,16.288,0,0,0-4.779-.733A15.437,15.437,0,0,0,19.1,16.752H14.8a15.423,15.423,0,0,0-6.76-1.574,16.289,16.289,0,0,0-4.78.733L5.521,6.857a2.33,2.33,0,0,1,1.2-1.519,2.515,2.515,0,0,1,1.951-.1l.775.258a.941.941,0,0,0,1.191-.6l.3-.893a.941.941,0,0,0-.6-1.191l-.9-.3A5.176,5.176,0,0,0,2.78,6.172L.112,16.868A3.78,3.78,0,0,0,0,17.779v4.135a6.742,6.742,0,0,0,6.78,6.7H8.965a6.749,6.749,0,0,0,6.761-6.2l.172-2.274H18l.172,2.274a6.748,6.748,0,0,0,6.761,6.2H27.12a6.742,6.742,0,0,0,6.78-6.7V17.78A3.781,3.781,0,0,0,33.788,16.868ZM11.97,22.13a3,3,0,0,1-3.005,2.72H6.78a2.979,2.979,0,0,1-3.013-2.936V19.7a12.776,12.776,0,0,1,4.272-.76,11.547,11.547,0,0,1,4.116.76Zm18.164-.216A2.978,2.978,0,0,1,27.12,24.85H24.935a2.994,2.994,0,0,1-3.005-2.72L21.746,19.7a11.551,11.551,0,0,1,4.117-.76,12.775,12.775,0,0,1,4.27.761v2.209Z" transform="translate(87.102 85.717)" />
</g>
</svg>
</div>
<!-- SVG Leaderboard -->
<div class="svgContainer" id="ranking">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="301" height="243" viewBox="0 0 301 243">
<defs>
<clipPath id="clip-Bestenlisten">
<rect width="301" height="243" />
</clipPath>
</defs>
<g id="Bestenlisten" clip-path="url(#clip-Bestenlisten)">
<rect width="301" height="243" fill="none" />
<rect id="Rechteck_3" data-name="Rechteck 3" width="254" height="38" transform="translate(23 23)" fill="#e5e5e5" />
<rect id="Rechteck_4" data-name="Rechteck 4" width="254" height="38" transform="translate(23 61)" fill="#fff" />
<rect id="Rechteck_5" data-name="Rechteck 5" width="254" height="38" transform="translate(23 99)" fill="#e5e5e5" />
<rect id="Rechteck_6" data-name="Rechteck 6" width="254" height="38" transform="translate(23 137)" fill="#fff" />
<rect id="Rechteck_7" data-name="Rechteck 7" width="254" height="38" transform="translate(23 175)" fill="#e5e5e5" />
<text id="_..." data-name="..." transform="translate(28 53)" font-size="27" font-family="SegoeUI, Segoe UI">
<tspan x="0" y="0">...</tspan>
</text>
<text id="_7_Erika_Müller" data-name="7 Erika Müller" transform="translate(28 91)" font-size="27" font-family="SegoeUI, Segoe UI">
<tspan x="0" y="0">7 Erika Müller</tspan>
</text>
<text id="_8_Max_Schmidt" data-name="8 Max Schmidt" transform="translate(28 129)" font-size="27" font-family="SegoeUI, Segoe UI">
<tspan x="0" y="0">8 Max Schmidt</tspan>
</text>
<text id="_9_Lisa_Fischer" data-name="9 Lisa Fischer" transform="translate(28 167)" font-size="27" font-family="SegoeUI, Segoe UI">
<tspan x="0" y="0">9 Lisa Fischer</tspan>
</text>
<text id="_...-2" data-name="..." transform="translate(28 205)" font-size="27" font-family="SegoeUI, Segoe UI">
<tspan x="0" y="0">...</tspan>
</text>
</g>
</svg>
</div>
<div class="svgContainer" id="level">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="119" height="64" viewBox="0 0 119 64">
<defs>
<clipPath id="clip-Level">
<rect width="119" height="64" />
</clipPath>
</defs>
<g id="Level" clip-path="url(#clip-Level)">
<rect width="119" height="64" fill="none" />
<text id="Level_5" data-name="Level 5" transform="translate(19 45)" font-size="27" font-family="SegoeUI, Segoe UI">
<tspan x="0" y="0">Level 5</tspan>
</text>
</g>
</svg>
</div>
<!-- SVG NPC -->
<div class="svgContainer" id="nonPlayerCharacter">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="91" height="132" viewBox="0 0 91 132">
<defs>
<clipPath id="clip-Nicht-Spieler-Charaktere">
<rect width="91" height="132" />
</clipPath>
</defs>
<g id="Nicht-Spieler-Charaktere" clip-path="url(#clip-Nicht-Spieler-Charaktere)">
<rect width="91" height="132" fill="none" />
<g id="Icon_ionic-md-man" data-name="Icon ionic-md-man" transform="translate(14.906 17.75)">
<path id="Pfad_1" data-name="Pfad 1" d="M23.536,18.567a8.158,8.158,0,1,0-8.158-8.158A8.131,8.131,0,0,0,23.536,18.567Z" transform="translate(6.931)" />
<path id="Pfad_2" data-name="Pfad 2" d="M38.647,8.086H22.286c-6.168,0-10.193,5.424-10.193,10.586V43.519a3.4,3.4,0,1,0,6.78,0V20.553h1.312V83.021c0,6.649,9.186,6.431,9.405,0v-36h1.75V83.043c.372,6.824,9.405,6.168,9.405-.022V20.553H41.84V43.519a3.5,3.5,0,1,0,7,0V18.672C48.84,13.532,44.793,8.086,38.647,8.086Z" transform="translate(0 12.318)" />
</g>
</g>
</svg>
</div>
<!-- SVG Points -->
<div class="svgContainer" id="points">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="162" height="66" viewBox="0 0 162 66">
<defs>
<clipPath id="clip-Punkte">
<rect width="162" height="66" />
</clipPath>
</defs>
<g id="Punkte" clip-path="url(#clip-Punkte)">
<rect width="162" height="66" fill="#fff" />
<text id="_125_Punkte" data-name="125 Punkte" transform="translate(15 44)" font-size="27" font-family="SegoeUI, Segoe UI">
<tspan x="0" y="0">125 Punkte</tspan>
</text>
</g>
</svg>
</div>
<!-- SVG Narrativ -->
<div class="svgContainer" id="narrativ">
</div>
</div>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment