diff --git a/index.html b/index.html
index 4bb3f2c9d8952a5c494fc5b76c413c2d19e7d8dc..217d65beab2972d751a0595abed9b4129c174420 100644
--- a/index.html
+++ b/index.html
@@ -10,673 +10,673 @@
<link rel="icon" href="./favicon.ico" type="image/x-icon">
</head>
<body>
- <div class="content">
- <h1>Gamification in der Fertigung</h1>
+<div class="content">
+<h1>Gamification in der Fertigung</h1>
- <h2>Eignung von Spiel-Design-Elementen anhand von Kriterien</h2>
- <p>
- Durch das Auswählen von Kriterien wird angezeigt, welche Spiel-Design-Elemente geeignet sind. Durch das Auswählen eines Spiel-Design-Elements wird ein Beispiel angezeigt.
- </p>
+<h2>Eignung von Spiel-Design-Elementen anhand von Kriterien</h2>
+<p>
+ Durch das Auswählen von Kriterien wird angezeigt, welche Spiel-Design-Elemente geeignet sind. Durch das Auswählen eines Spiel-Design-Elements wird ein Beispiel angezeigt.
+</p>
- <div class="grid-parent">
+<div class="grid-parent">
- <!-- Criteria -->
+ <!-- Criteria -->
- <!-- Column Main criteria Safety-->
- <div class="div1 main-criterias">
- <div>
- <p class="main-criteria">
- <label><input id="h1" type="checkbox" onchange="toggleCriteria()"> </label> <span>Sicherheit</span>
- </p>
+ <!-- Column Main criteria Safety-->
+ <div class="div1 main-criterias">
+ <div>
+ <p class="main-criteria">
+ <label><input id="h1" type="checkbox" onchange="toggleCriteria()"> </label> <span>Sicherheit</span>
+ </p>
- <!-- Container criteria for main criterion Safety -->
- <div id="CriteriaOneContainer">
- <fieldset>
- <div>
- <input id="criteria11" type="checkbox" class="criteria h1" onchange="criteriaOnChange1()"> <label for="criteria11">Geringe bis keine Interaktion</label>
- </div>
-
- <div>
- <input id="criteria12" type="checkbox" class="criteria h1" onchange="criteriaOnChange1()"> <label for="criteria12">Ablenkung so gering wie möglich</label>
- </div>
- </fieldset>
+ <!-- Container criteria for main criterion Safety -->
+ <div id="CriteriaOneContainer">
+ <fieldset>
+ <div>
+ <input id="criteria11" type="checkbox" class="criteria h1" onchange="criteriaOnChange1()"> <label for="criteria11">Geringe bis keine Interaktion</label>
</div>
- </div>
+ <div>
+ <input id="criteria12" type="checkbox" class="criteria h1" onchange="criteriaOnChange1()"> <label for="criteria12">Ablenkung so gering wie möglich</label>
+ </div>
+ </fieldset>
</div>
+ </div>
- <!-- Column Main criteria Personality-->
- <div class="div2 main-criterias">
+ </div>
- <div>
- <p class="main-criteria">
- <input id="h2" type="checkbox" onchange="toggleCriteria()">
- <label for="h2">Persönlichkeit
- </label>
- </p>
+ <!-- Column Main criteria Personality-->
+ <div class="div2 main-criterias">
- <!-- Container criteria for main criterion Personlaity -->
- <div id="CriteriaTwoContainer">
- <fieldset>
- <div>
- <input id="criteria21" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()">
- <label for="criteria21">Hohe Geduld und hohe Kompetitivität</label>
- </div>
-
- <div>
- <input id="criteria22" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()"> <label for="criteria22">Spielertyp: Achiever</label>
- </div>
-
- <div>
- <input id="criteria23" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()">
- <label for="criteria23">Spielertyp: Explorer </label>
- </div>
-
- <div>
- <input id="criteria24" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()"> <label for="criteria24">Spielertyp: Socialiser</label>
- </div>
-
- <div>
- <input id="criteria25" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()"> <label for="criteria25">Spielertyp: Killer</label>
- </div>
- </fieldset>
+ <div>
+ <p class="main-criteria">
+ <input id="h2" type="checkbox" onchange="toggleCriteria()">
+ <label for="h2">Persönlichkeit
+ </label>
+ </p>
+
+ <!-- Container criteria for main criterion Personlaity -->
+ <div id="CriteriaTwoContainer">
+ <fieldset>
+ <div>
+ <input id="criteria21" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()">
+ <label for="criteria21">Hohe Geduld und hohe Kompetitivität</label>
</div>
- </div>
+ <div>
+ <input id="criteria22" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()"> <label for="criteria22">Spielertyp: Achiever</label>
+ </div>
- </div>
+ <div>
+ <input id="criteria23" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()">
+ <label for="criteria23">Spielertyp: Explorer </label>
+ </div>
- <!-- Column Main criteria Motivation-->
- <div class="div3 main-criterias">
- <div>
- <p class="main-criteria">
- <label><input id="h3" type="checkbox" onchange="toggleCriteria()"> </label> <span>Motivation</span>
- </p>
+ <div>
+ <input id="criteria24" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()"> <label for="criteria24">Spielertyp: Socialiser</label>
+ </div>
- <!-- Container criteria for main criterion Motivation -->
- <div id="CriteriaThreeContainer">
- <fieldset>
- <div>
- <input id="criteria31" type="checkbox" class="criteria h3" onchange="criteriaOnChange3()"> <label for="criteria31">Förderung des Kompetenzerlebens</label>
- </div>
-
- <div>
- <input id="criteria32" type="checkbox" class="criteria h3" onchange="criteriaOnChange3()"> <label for="criteria32">Förderung der Aufgabenbedeutsamkeit</label>
- </div>
-
- <div>
- <input id="criteria33" type="checkbox" class="criteria h3" onchange="criteriaOnChange3()"> <label for="criteria33">Erleben sozialer Eingebundenheit</label>
- </div>
- </fieldset>
+ <div>
+ <input id="criteria25" type="checkbox" class="criteria h2" onchange="criteriaOnChange2()"> <label for="criteria25">Spielertyp: Killer</label>
</div>
- </div>
+ </fieldset>
</div>
- <!-- Column Main criteria Generation-->
- <div class="div4 main-criterias">
- <div>
- <p class="main-criteria">
- <label><input id="h4" type="checkbox" onchange="toggleCriteria()"> </label> <span>Generation</span>
- </p>
+ </div>
+
+ </div>
- <!-- Container criteria for main criterion Generation -->
- <div id="CriteriaFourContainer">
- <fieldset>
- <div>
- <input id="criteria41" type="checkbox" class="criteria h4" onchange="criteriaOnChange4()"> <label for="criteria41">Generation X: 16 - 24 Jahre</label>
- </div>
-
- <div>
- <input id="criteria42" type="checkbox" class="criteria h4" onchange="criteriaOnChange4()"> <label for="criteria42">Generation Y: 25 - 40 Jahre</label>
- </div>
-
- <div>
- <input id="criteria43" type="checkbox" class="criteria h4" onchange="criteriaOnChange4()"> <label for="criteria43">Generation Z: über 40 Jahre</label>
- </div>
- </fieldset>
+ <!-- Column Main criteria Motivation-->
+ <div class="div3 main-criterias">
+ <div>
+ <p class="main-criteria">
+ <label><input id="h3" type="checkbox" onchange="toggleCriteria()"> </label> <span>Motivation</span>
+ </p>
+
+ <!-- Container criteria for main criterion Motivation -->
+ <div id="CriteriaThreeContainer">
+ <fieldset>
+ <div>
+ <input id="criteria31" type="checkbox" class="criteria h3" onchange="criteriaOnChange3()"> <label for="criteria31">Förderung des Kompetenzerlebens</label>
</div>
- </div>
+ <div>
+ <input id="criteria32" type="checkbox" class="criteria h3" onchange="criteriaOnChange3()"> <label for="criteria32">Förderung der Aufgabenbedeutsamkeit</label>
+ </div>
+
+ <div>
+ <input id="criteria33" type="checkbox" class="criteria h3" onchange="criteriaOnChange3()"> <label for="criteria33">Erleben sozialer Eingebundenheit</label>
+ </div>
+ </fieldset>
</div>
+ </div>
+ </div>
- <!-- Elements -->
- <!-- Points -->
- <div class="div5 grid-container2">
+ <!-- Column Main criteria Generation-->
+ <div class="div4 main-criterias">
+ <div>
+ <p class="main-criteria">
+ <label><input id="h4" type="checkbox" onchange="toggleCriteria()"> </label> <span>Generation</span>
+ </p>
- <div class="progressbar" onclick="setActive(this,'points')">
- <div class="outer">
- <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90px" height="90px">
- <defs>
- <linearGradient id="GradientColor1">
- <stop offset="0%" stop-color="#e91e63" />
- <stop offset="100%" stop-color="#673ab7" />
- </linearGradient>
- </defs>
- <circle cx="44.8" cy="45.2" r="37.6" stroke-linecap="round" stroke="url('#GradientColor1')" stroke-width="10px" stroke-dasharray="235" stroke-dashoffset="235" />
- </svg>
+ <!-- Container criteria for main criterion Generation -->
+ <div id="CriteriaFourContainer">
+ <fieldset>
+ <div>
+ <input id="criteria41" type="checkbox" class="criteria h4" onchange="criteriaOnChange4()"> <label for="criteria41">Generation X: 16 - 24 Jahre</label>
+ </div>
- <div class="inner">
- <div class="number" id="number">0%
- </div>
+ <div>
+ <input id="criteria42" type="checkbox" class="criteria h4" onchange="criteriaOnChange4()"> <label for="criteria42">Generation Y: 25 - 40 Jahre</label>
</div>
+
+ <div>
+ <input id="criteria43" type="checkbox" class="criteria h4" onchange="criteriaOnChange4()"> <label for="criteria43">Generation Z: über 40 Jahre</label>
</div>
+ </fieldset>
+ </div>
+ </div>
- <p>
- Punkte
- </p>
+ </div>
+ <!-- Elements -->
+ <!-- Points -->
+ <div class="div5 grid-container2">
+
+ <div class="progressbar" onclick="setActive(this,'points')">
+ <div class="outer">
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90px" height="90px">
+ <defs>
+ <linearGradient id="GradientColor1">
+ <stop offset="0%" stop-color="#e91e63" />
+ <stop offset="100%" stop-color="#673ab7" />
+ </linearGradient>
+ </defs>
+ <circle cx="44.8" cy="45.2" r="37.6" stroke-linecap="round" stroke="url('#GradientColor1')" stroke-width="10px" stroke-dasharray="235" stroke-dashoffset="235" />
+ </svg>
+
+ <div class="inner">
+ <div class="number" id="number">0%
+ </div>
</div>
-
</div>
- <!-- Badges -->
- <div class="div6 grid-container2">
+ <p>
+ Punkte
+ </p>
- <div class="progressbar" onclick="setActive(this, 'badge' )">
- <div class="outer">
+ </div>
- <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90px" height="90px">
- <defs>
- <linearGradient id="GradientColor2">
- <stop offset="0%" stop-color="#e91e63" />
- <stop offset="100%" stop-color="#673ab7" />
- </linearGradient>
- </defs>
- <circle cx="44.8" cy="45.2" r="37.6" stroke-linecap="round" stroke="url('#GradientColor2')" stroke-width="10px" stroke-dasharray="235" stroke-dashoffset="235" />
- </svg>
+ </div>
- <div class="inner">
- <div class="number" id="number">0%
- </div>
- </div>
- </div>
+ <!-- Badges -->
+ <div class="div6 grid-container2">
- <p>
- Abzeichen
- </p>
+ <div class="progressbar" onclick="setActive(this, 'badge' )">
+ <div class="outer">
- </div>
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90px" height="90px">
+ <defs>
+ <linearGradient id="GradientColor2">
+ <stop offset="0%" stop-color="#e91e63" />
+ <stop offset="100%" stop-color="#673ab7" />
+ </linearGradient>
+ </defs>
+ <circle cx="44.8" cy="45.2" r="37.6" stroke-linecap="round" stroke="url('#GradientColor2')" stroke-width="10px" stroke-dasharray="235" stroke-dashoffset="235" />
+ </svg>
+ <div class="inner">
+ <div class="number" id="number">0%
+ </div>
+ </div>
</div>
- <!-- Progressbar -->
- <div class="div7 grid-container2">
- <div class="progressbar" onclick="setActive(this, 'progressBar' )">
- <div class="outer">
+ <p>
+ Abzeichen
+ </p>
- <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90px" height="90px">
- <defs>
- <linearGradient id="GradientColor3">
- <stop offset="0%" stop-color="#e91e63" />
- <stop offset="100%" stop-color="#673ab7" />
- </linearGradient>
- </defs>
- <circle cx="44.8" cy="45.2" r="37.6" stroke-linecap="round" stroke="url('#GradientColor3')" stroke-width="10px" stroke-dasharray="235" stroke-dashoffset="235" />
- </svg>
+ </div>
- <div class="inner">
- <div class="number" id="number">0%
- </div>
- </div>
- </div>
+ </div>
- <p>
- Fortschrittsanzeige
- </p>
+ <!-- Progressbar -->
+ <div class="div7 grid-container2">
+ <div class="progressbar" onclick="setActive(this, 'progressBar' )">
+ <div class="outer">
- </div>
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90px" height="90px">
+ <defs>
+ <linearGradient id="GradientColor3">
+ <stop offset="0%" stop-color="#e91e63" />
+ <stop offset="100%" stop-color="#673ab7" />
+ </linearGradient>
+ </defs>
+ <circle cx="44.8" cy="45.2" r="37.6" stroke-linecap="round" stroke="url('#GradientColor3')" stroke-width="10px" stroke-dasharray="235" stroke-dashoffset="235" />
+ </svg>
+ <div class="inner">
+ <div class="number" id="number">0%
+ </div>
+ </div>
</div>
- <!-- Leaderboards -->
- <div class="div8 grid-container2">
+ <p>
+ Fortschrittsanzeige
+ </p>
- <div class="progressbar" onclick="setActive(this, 'ranking' )">
- <div class="outer">
+ </div>
- <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90px" height="90px">
- <defs>
- <linearGradient id="GradientColor4">
- <stop offset="0%" stop-color="#e91e63" />
- <stop offset="100%" stop-color="#673ab7" />
- </linearGradient>
- </defs>
- <circle cx="44.8" cy="45.2" r="37.6" stroke-linecap="round" stroke="url('#GradientColor4')" stroke-width="10px" stroke-dasharray="235" stroke-dashoffset="235" />
- </svg>
+ </div>
- <div class="inner">
- <div class="number" id="number">0%
- </div>
- </div>
- </div>
+ <!-- Leaderboards -->
+ <div class="div8 grid-container2">
- <p>
- Bestenlisten
- </p>
+ <div class="progressbar" onclick="setActive(this, 'ranking' )">
+ <div class="outer">
- </div>
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90px" height="90px">
+ <defs>
+ <linearGradient id="GradientColor4">
+ <stop offset="0%" stop-color="#e91e63" />
+ <stop offset="100%" stop-color="#673ab7" />
+ </linearGradient>
+ </defs>
+ <circle cx="44.8" cy="45.2" r="37.6" stroke-linecap="round" stroke="url('#GradientColor4')" stroke-width="10px" stroke-dasharray="235" stroke-dashoffset="235" />
+ </svg>
+ <div class="inner">
+ <div class="number" id="number">0%
+ </div>
+ </div>
</div>
- <!-- Level -->
- <div class="div9 grid-container2">
+ <p>
+ Bestenlisten
+ </p>
- <div class="progressbar" onclick="setActive(this, 'level' )">
- <div class="outer">
+ </div>
- <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90px" height="90px">
- <defs>
- <linearGradient id="GradientColor5">
- <stop offset="0%" stop-color="#e91e63" />
- <stop offset="100%" stop-color="#673ab7" />
- </linearGradient>
- </defs>
- <circle cx="44.8" cy="45.2" r="37.6" stroke-linecap="round" stroke="url('#GradientColor5')" stroke-width="10px" stroke-dasharray="235" stroke-dashoffset="235" />
- </svg>
+ </div>
- <div class="inner">
- <div class="number" id="number">0%
- </div>
- </div>
- </div>
+ <!-- Level -->
+ <div class="div9 grid-container2">
- <p>
- Level
- </p>
+ <div class="progressbar" onclick="setActive(this, 'level' )">
+ <div class="outer">
- </div>
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90px" height="90px">
+ <defs>
+ <linearGradient id="GradientColor5">
+ <stop offset="0%" stop-color="#e91e63" />
+ <stop offset="100%" stop-color="#673ab7" />
+ </linearGradient>
+ </defs>
+ <circle cx="44.8" cy="45.2" r="37.6" stroke-linecap="round" stroke="url('#GradientColor5')" stroke-width="10px" stroke-dasharray="235" stroke-dashoffset="235" />
+ </svg>
+ <div class="inner">
+ <div class="number" id="number">0%
+ </div>
+ </div>
</div>
- <!-- Narrative -->
- <div class="div10 grid-container2">
+ <p>
+ Level
+ </p>
- <div class="progressbar" onclick="setActive(this, 'narrativ' )">
- <div class="outer">
+ </div>
- <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90px" height="90px">
- <defs>
- <linearGradient id="GradientColor6">
- <stop offset="0%" stop-color="#e91e63" />
- <stop offset="100%" stop-color="#673ab7" />
- </linearGradient>
- </defs>
- <circle cx="44.8" cy="45.2" r="37.6" stroke-linecap="round" stroke="url('#GradientColor6')" stroke-width="10px" stroke-dasharray="235" stroke-dashoffset="235" />
- </svg>
+ </div>
- <div class="inner">
- <div class="number" id="number">0%
- </div>
- </div>
- </div>
+ <!-- Narrative -->
+ <div class="div10 grid-container2">
- <p>
- Narrativ
- </p>
+ <div class="progressbar" onclick="setActive(this, 'narrativ' )">
+ <div class="outer">
- </div>
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90px" height="90px">
+ <defs>
+ <linearGradient id="GradientColor6">
+ <stop offset="0%" stop-color="#e91e63" />
+ <stop offset="100%" stop-color="#673ab7" />
+ </linearGradient>
+ </defs>
+ <circle cx="44.8" cy="45.2" r="37.6" stroke-linecap="round" stroke="url('#GradientColor6')" stroke-width="10px" stroke-dasharray="235" stroke-dashoffset="235" />
+ </svg>
+ <div class="inner">
+ <div class="number" id="number">0%
+ </div>
+ </div>
</div>
- <!-- Avatar -->
- <div class="div11 grid-container2">
+ <p>
+ Narrativ
+ </p>
- <div class="progressbar" onclick="setActive(this, 'avatar' )">
- <div class="outer">
+ </div>
- <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90px" height="90px">
- <defs>
- <linearGradient id="GradientColor7">
- <stop offset="0%" stop-color="#e91e63" />
- <stop offset="100%" stop-color="#673ab7" />
- </linearGradient>
- </defs>
- <circle cx="44.8" cy="45.2" r="37.6" stroke-linecap="round" stroke="url('#GradientColor7')" stroke-width="10px" stroke-dasharray="235" stroke-dashoffset="235" />
- </svg>
+ </div>
- <div class="inner">
- <div class="number" id="number">0%
- </div>
- </div>
- </div>
+ <!-- Avatar -->
+ <div class="div11 grid-container2">
- <p>
- Avatar
- </p>
+ <div class="progressbar" onclick="setActive(this, 'avatar' )">
+ <div class="outer">
- </div>
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90px" height="90px">
+ <defs>
+ <linearGradient id="GradientColor7">
+ <stop offset="0%" stop-color="#e91e63" />
+ <stop offset="100%" stop-color="#673ab7" />
+ </linearGradient>
+ </defs>
+ <circle cx="44.8" cy="45.2" r="37.6" stroke-linecap="round" stroke="url('#GradientColor7')" stroke-width="10px" stroke-dasharray="235" stroke-dashoffset="235" />
+ </svg>
+ <div class="inner">
+ <div class="number" id="number">0%
+ </div>
+ </div>
</div>
- <!-- NPC -->
- <div class="div12 grid-container2">
+ <p>
+ Avatar
+ </p>
- <div class="progressbar" onclick="setActive(this,'nonPlayerCharacter')">
- <div class="outer">
+ </div>
- <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90px" height="90px">
- <defs>
- <linearGradient id="GradientColor8">
- <stop offset="0%" stop-color="#e91e63" />
- <stop offset="100%" stop-color="#673ab7" />
- </linearGradient>
- </defs>
- <circle cx="44.8" cy="45.2" r="37.6" stroke-linecap="round" stroke="url('#GradientColor8')" stroke-width="10px" stroke-dasharray="235" stroke-dashoffset="235" />
- </svg>
+ </div>
- <div class="inner">
- <div class="number" id="number">0%
- </div>
- </div>
- </div>
+ <!-- NPC -->
+ <div class="div12 grid-container2">
- <p>
- Nicht-Spieler-Charaktere
- </p>
- </div>
+ <div class="progressbar" onclick="setActive(this,'nonPlayerCharacter')">
+ <div class="outer">
- </div>
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90px" height="90px">
+ <defs>
+ <linearGradient id="GradientColor8">
+ <stop offset="0%" stop-color="#e91e63" />
+ <stop offset="100%" stop-color="#673ab7" />
+ </linearGradient>
+ </defs>
+ <circle cx="44.8" cy="45.2" r="37.6" stroke-linecap="round" stroke="url('#GradientColor8')" stroke-width="10px" stroke-dasharray="235" stroke-dashoffset="235" />
+ </svg>
- <!-- Graph -->
- <div class="div13 graph">
-
- <p> Anzahl der erfüllten Kriterien der jeweiligen Spiel-Design-Elemente</p>
- <div style="height:340px;">
- <canvas id="myChart"></canvas>
+ <div class="inner">
+ <div class="number" id="number">0%
+ </div>
</div>
-
</div>
- <!-- Examples -->
- <div class="div14">
+ <p>
+ Nicht-Spieler-Charaktere
+ </p>
+ </div>
- <!-- Container for Examples -->
- <div class="examples">
+ </div>
- <p>
- Beispiele
- </p>
+ <!-- Graph -->
+ <div class="div13 graph">
- <!-- SVG Progressbar -->
- <div class="svgContainer" id="progressBar">
-
- <div class="grid-examples">
-
- <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>
+ <p> Anzahl der erfüllten Kriterien der jeweiligen Spiel-Design-Elemente</p>
+ <div style="height:340px;">
+ <canvas id="myChart"></canvas>
+ </div>
- <div>
- <p>
- Fortschrittsanzeigen bilden Individuelle Leistungen eines/einer NutzerIn innerhalb eines definierten Zeitraums ab. Sie zeigen an, welche Aufgaben oder Teilziele NutzerInnen bisher erreicht haben. Außerdem machen sie sichtbar, wie viele Teilziele bereits erreicht wurden und noch nötig sind zur Vervollständigung eines Gesamtziels.
- </p>
+ </div>
- <p class="source">
- Michael Sailer. 2016. Die Wirkung von Gamification auf Motivation und Leistung. Springer Fachmedien Wiesbaden, Wiesbaden.
- </p>
+ <!-- Examples -->
+ <div class="div14">
- </div>
+ <!-- Container for Examples -->
+ <div class="examples">
- </div>
+ <p>
+ Beispiele
+ </p>
- </div>
+ <!-- SVG Progressbar -->
+ <div class="svgContainer" id="progressBar">
- <!-- SVG Badge -->
- <div class="svgContainer" id="badge">
-
- <div class="grid-examples">
-
- <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>
- <p>
- Abzeichen repräsentieren verschiedene definierte Leistungen, wie bspw.:
- <ul>
- <li>Die erstmalige Ausführung einer Aktivität.</li>
- <li>Das Erreichen eines bestimmten Punktestands.</li>
- <li>Das Abschließen gewisser Aufgaben innerhalb einer vorgegebenen Zeitspanne.</li>
- </ul>
- Sie tragen zur Transparenz bei, indem sie aufzeigen, welche Aktionen möglich sind und welche Bedingungen an den Erhalt dieser geknüpft ist. In einem Wettbewerb können sie zum Vergleich verschiedener Nutzer dienen.
-
- <p class="source">
- Michael Sailer. 2016. Die Wirkung von Gamification auf Motivation und Leistung. Springer Fachmedien Wiesbaden, Wiesbaden.
- </p>
- </p>
-
- </div>
- </div>
- </div>
+ <div class="grid-examples">
- <!-- SVG Avatar -->
- <div class="svgContainer" id="avatar">
- <div class="grid-examples">
- <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)" />
+ <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>
- </svg>
+ <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>
- <p>
- Avatare können zur Immersion in eine Gamification-Anwendung beitragen, indem sie Repräsentation der NutzerInnen schaffen mit der sich diese/r identifizieren kann. Bei der Gestaltung ist zu beachten, dass diese gut durchdacht und ansprechend sein sollten.
- </p>
+ <div>
+ <p>
+ Fortschrittsanzeigen bilden Individuelle Leistungen eines/einer NutzerIn innerhalb eines definierten Zeitraums ab. Sie zeigen an, welche Aufgaben oder Teilziele NutzerInnen bisher erreicht haben. Außerdem machen sie sichtbar, wie viele Teilziele bereits erreicht wurden und noch nötig sind zur Vervollständigung eines Gesamtziels.
+ </p>
- <p class="source">
- Michael Sailer. 2016. Die Wirkung von Gamification auf Motivation und Leistung. Springer Fachmedien Wiesbaden, Wiesbaden.
- </p>
+ <p class="source">
+ Michael Sailer. 2016. Die Wirkung von Gamification auf Motivation und Leistung. Springer Fachmedien Wiesbaden, Wiesbaden.
+ </p>
- </div>
- </div>
</div>
- <!-- SVG Leaderboard -->
- <div class="svgContainer" id="ranking">
- <div class="grid-examples">
- <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>
- <p>
- Bestenlisten bringen NutzerInnen in eine, für alle einsehbare, Reihenfolge ihrer erreichten Leistungen. Sie können Zielsetzungen aufzeigen, die klar definiert, zeitgebunden, messbar und vor allem erreichbar sein sollten. [2] Je nach Zielsetzung sollten Überlegungen angestrebt werden, inwieweit diese Listen eingesehen werden können. So kann es beispielweise hilfreich sein einen NutzerInnen nur in dem Kontext des nächstbesseren und -schlechteren NutzerIn abzubilden. [1]
- </p>
+ </div>
- <p class="source">
- [1] Janaki Kumar and Mario Herger. 2013. Gamification at work. Designing engaging business software (1. ed.). Interaction Design Foundation, Ã…rhus.
- </p>
+ <!-- SVG Badge -->
+ <div class="svgContainer" id="badge">
+
+ <div class="grid-examples">
+
+ <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>
+ <p>
+ Abzeichen repräsentieren verschiedene definierte Leistungen, wie bspw.:
+ <ul>
+ <li>Die erstmalige Ausführung einer Aktivität.</li>
+ <li>Das Erreichen eines bestimmten Punktestands.</li>
+ <li>Das Abschließen gewisser Aufgaben innerhalb einer vorgegebenen Zeitspanne.</li>
+ </ul>
+ Sie tragen zur Transparenz bei, indem sie aufzeigen, welche Aktionen möglich sind und welche Bedingungen an den Erhalt dieser geknüpft ist. In einem Wettbewerb können sie zum Vergleich verschiedener Nutzer dienen.
+
+ <p class="source">
+ Michael Sailer. 2016. Die Wirkung von Gamification auf Motivation und Leistung. Springer Fachmedien Wiesbaden, Wiesbaden.
+ </p>
+ </p>
- <p class="source">
- [2] Michael Sailer. 2016. Die Wirkung von Gamification auf Motivation und Leistung. Springer Fachmedien Wiesbaden, Wiesbaden.
- </p>
- </div>
- </div>
</div>
+ </div>
+ </div>
- <!-- SVG Level -->
- <div class="svgContainer" id="level">
- <div class="grid-examples">
- <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>
+ <!-- SVG Avatar -->
+ <div class="svgContainer" id="avatar">
+ <div class="grid-examples">
+ <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>
- </svg>
- <div>
- <p>
- Die Gestaltung von Level kann von verschiedenen Faktoren abhängig gemacht werden, bspw. durch das Erreichen eines gewissen Punktestandes. Je nach Zielsetzung kann der Aufstieg in ein höheres Level an das Erreichen von Aufgaben in einem bestimmten Zeitraum oder an eine bestimmte Anzahl an Ausführungen einer Aktivität geknüpft sein.
- </p>
+ <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>
+ <p>
+ Avatare können zur Immersion in eine Gamification-Anwendung beitragen, indem sie Repräsentation der NutzerInnen schaffen mit der sich diese/r identifizieren kann. Bei der Gestaltung ist zu beachten, dass diese gut durchdacht und ansprechend sein sollten.
+ </p>
- <p class="source">
- Oliver Korn, Annika S. Schulz, and Belinda J. Hagley. 2022. Gamification: Grundlagen, Methoden und Anwendungsbeispiele. In Digitale Lernwelten – Serious Games und Gamification, Wolfgang Becker and Maren Metz, Eds. Springer Fachmedien Wiesbaden, Wiesbaden, 43–63. DOI: https://doi.org/10.1007/978-3-658-35059-8_4.
- </p>
+ <p class="source">
+ Michael Sailer. 2016. Die Wirkung von Gamification auf Motivation und Leistung. Springer Fachmedien Wiesbaden, Wiesbaden.
+ </p>
- </div>
- </div>
</div>
+ </div>
+ </div>
- <!-- SVG NPC -->
- <div class="svgContainer" id="nonPlayerCharacter">
- <div class="grid-examples">
- <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>
+ <!-- SVG Leaderboard -->
+ <div class="svgContainer" id="ranking">
+ <div class="grid-examples">
+ <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>
- <p>
- Nicht-Spieler-Charaktere sind Charaktere, die nicht aktiv von NutzerInnen gesteuert werden können. Sie können hilfreich in einer Gamification-Anwendung mit Narrativ sein, indem sie bspw. Aufgaben an die NutzerInnen übergeben und ihr Gefühl der Bedeutsamkeit erhöhen.
- </p>
+ <div>
+ <p>
+ Bestenlisten bringen NutzerInnen in eine, für alle einsehbare, Reihenfolge ihrer erreichten Leistungen. Sie können Zielsetzungen aufzeigen, die klar definiert, zeitgebunden, messbar und vor allem erreichbar sein sollten. [2] Je nach Zielsetzung sollten Überlegungen angestrebt werden, inwieweit diese Listen eingesehen werden können. So kann es beispielweise hilfreich sein einen NutzerInnen nur in dem Kontext des nächstbesseren und -schlechteren NutzerIn abzubilden. [1]
+ </p>
- <p class="source">
- Michael Sailer. 2016. Die Wirkung von Gamification auf Motivation und Leistung. Springer Fachmedien Wiesbaden, Wiesbaden.
- </p>
+ <p class="source">
+ [1] Janaki Kumar and Mario Herger. 2013. Gamification at work. Designing engaging business software (1. ed.). Interaction Design Foundation, Ã…rhus.
+ </p>
- </div>
+ <p class="source">
+ [2] Michael Sailer. 2016. Die Wirkung von Gamification auf Motivation und Leistung. Springer Fachmedien Wiesbaden, Wiesbaden.
+ </p>
</div>
+ </div>
+ </div>
+
+ <!-- SVG Level -->
+ <div class="svgContainer" id="level">
+ <div class="grid-examples">
+ <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>
+ <p>
+ Die Gestaltung von Level kann von verschiedenen Faktoren abhängig gemacht werden, bspw. durch das Erreichen eines gewissen Punktestandes. Je nach Zielsetzung kann der Aufstieg in ein höheres Level an das Erreichen von Aufgaben in einem bestimmten Zeitraum oder an eine bestimmte Anzahl an Ausführungen einer Aktivität geknüpft sein.
+ </p>
+
+ <p class="source">
+ Oliver Korn, Annika S. Schulz, and Belinda J. Hagley. 2022. Gamification: Grundlagen, Methoden und Anwendungsbeispiele. In Digitale Lernwelten – Serious Games und Gamification, Wolfgang Becker and Maren Metz, Eds. Springer Fachmedien Wiesbaden, Wiesbaden, 43–63. DOI: https://doi.org/10.1007/978-3-658-35059-8_4.
+ </p>
+
</div>
+ </div>
+ </div>
- <!-- SVG Points -->
- <div class="svgContainer" id="points">
- <div class="grid-examples">
- <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>
+ <!-- SVG NPC -->
+ <div class="svgContainer" id="nonPlayerCharacter">
+ <div class="grid-examples">
+ <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>
- </svg>
+ </g>
+ </svg>
- <div>
- <p>
- Punkte visualisieren den aktuellen Spielstand und können für das Abschließen verschiedener Aufgaben vergeben werden. Sie tragen je nach Anwendung zur Transparenz bei und können bspw. anzeigen, wann ein höheres Level erreicht wird oder wie die Leistung eines/einer NutzerIn im Vergleich zu anderen Nutzern ist.
- </p>
+ <div>
+ <p>
+ Nicht-Spieler-Charaktere sind Charaktere, die nicht aktiv von NutzerInnen gesteuert werden können. Sie können hilfreich in einer Gamification-Anwendung mit Narrativ sein, indem sie bspw. Aufgaben an die NutzerInnen übergeben und ihr Gefühl der Bedeutsamkeit erhöhen.
+ </p>
- <p class="source">
- Michael Sailer. 2016. Die Wirkung von Gamification auf Motivation und Leistung. Springer Fachmedien Wiesbaden, Wiesbaden.
- </p>
+ <p class="source">
+ Michael Sailer. 2016. Die Wirkung von Gamification auf Motivation und Leistung. Springer Fachmedien Wiesbaden, Wiesbaden.
+ </p>
- </div>
- </div>
</div>
+ </div>
+ </div>
- <!-- SVG Narrativ -->
- <div class="svgContainer" id="narrativ">
- <div class="grid-examples">
+ <!-- SVG Points -->
+ <div class="svgContainer" id="points">
+ <div class="grid-examples">
+ <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>
- <di>
- <p>
- Mit einem Narrativ ist das Unterlegen einer Gamification-Anwendung mit einer Geschichte gemeint. Die Geschichte kann sich an der realen Situation orientieren, an der die Anwendung anknüpft. Ein Narrativ kann die Immersion erhöhen und Handlungen eine Bedeutung zukommen lassen. Außerdem kann es genutzt werden, um ein Ziel vorzugeben.
- </p>
+ <div>
+ <p>
+ Punkte visualisieren den aktuellen Spielstand und können für das Abschließen verschiedener Aufgaben vergeben werden. Sie tragen je nach Anwendung zur Transparenz bei und können bspw. anzeigen, wann ein höheres Level erreicht wird oder wie die Leistung eines/einer NutzerIn im Vergleich zu anderen Nutzern ist.
+ </p>
- <p class="source">
- Michael Sailer. 2016. Die Wirkung von Gamification auf Motivation und Leistung. Springer Fachmedien Wiesbaden, Wiesbaden.
- </p>
+ <p class="source">
+ Michael Sailer. 2016. Die Wirkung von Gamification auf Motivation und Leistung. Springer Fachmedien Wiesbaden, Wiesbaden.
+ </p>
</div>
- </div>
+ </div>
</div>
+ <!-- SVG Narrativ -->
+ <div class="svgContainer" id="narrativ">
+ <div class="grid-examples">
+
+ <di>
+ <p>
+ Mit einem Narrativ ist das Unterlegen einer Gamification-Anwendung mit einer Geschichte gemeint. Die Geschichte kann sich an der realen Situation orientieren, an der die Anwendung anknüpft. Ein Narrativ kann die Immersion erhöhen und Handlungen eine Bedeutung zukommen lassen. Außerdem kann es genutzt werden, um ein Ziel vorzugeben.
+ </p>
+
+ <p class="source">
+ Michael Sailer. 2016. Die Wirkung von Gamification auf Motivation und Leistung. Springer Fachmedien Wiesbaden, Wiesbaden.
+ </p>
+
+ </div>
</div>
</div>
+
</div>
+</div>
+</div>
<script src="index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>