Zum Inhalt springen

Änderungen von Dokument Sandbox

Zuletzt geändert von Holger Engels am 2024/01/26 15:58
Von Version 28.1
bearbeitet von Holger Engels
am 2023/12/25 14:36
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 9.1
bearbeitet von Holger Engels
am 2023/11/08 06:52
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -1,8 +6,3 @@
1 -{{aufgabeneu id="CO2-Konzentarion" afb="" kompetenzen="" quelle="[[IQB>>https://www.iqb.hu-berlin.de/abitur/pools2020/abitur/pools2020/mathematik/erhoeht/2020_M_erhoeht_B_Analysis_WTR_1.pdf]]" niveau="e" tags="iqb"}}
2 -
3 -In einer Messstation wird seit 1958 kontinuierlich die CO,,2,,-Konzentration in der Luft gemessen, die in ppm (parts per million) angegeben wird. Die Tabelle gibt für die Jahre 1960, 1985 und 2010 jeweils den jährlichen Durchschnittswert der Messwerte an.
4 -{{/aufgabeneu}}
5 -
6 6  Der Sandkasten ist ein Teil dieses Wikis, der frei editierbar ist. Er ist dafür gedacht, das Arbeiten mit dem Wiki zu üben. Sie können herausfinden, wie das Bearbeiten von Seiten funktioniert und wie man neue Seiten erstellt. Klicken Sie einfach auf **Bearbeiten** um zu beginnen!
7 7  
8 8  {{info}}
... ... @@ -104,8 +104,45 @@
104 104  
105 105  [[image:XWikiLogo.png]]
106 106  
107 -== Orphaned Pages ==
102 += Makros =
108 108  
104 +Makros bieten die Möglichkeit, das Aussehen von Wiki-Seiten zu verbessern und stellen zusätzliche Funktionalitäten in der Seite zur Verfügung. Hier sind zwei Beispiele, wie Makros die Inhalte verbessern können:
105 +
106 +{{html clean="false"}}
107 +<script>
108 + customElements.define("star-rating", class extends HTMLElement {
109 + set rating(rate) {
110 + if (!String(rate).includes("%")) rate = Number(rate) / this.stars * 100 + "%";
111 + this.querySelector(":nth-child(2)").setAttribute("width", rate); //2nd rect
112 + }
113 + set value(v) {
114 + this.setAttribute("rating", v);
115 + }
116 + connectedCallback() {
117 + let {bgcolor,stars,nocolor,color,rating} = this.attributes;
118 + let repeat = (count, func) => Array(count).fill().map(func);
119 + this.stars = ~~stars.value || 5;
120 + this.innerHTML = `<svg viewBox="0 0 ${this.stars*100} 100" style=cursor:pointer>` +
121 + `<rect height=100 fill=${nocolor.value} width=100% />` +
122 + `<rect height=100 fill=${color.value} />` +
123 + repeat(this.stars , (i, n) => `<path fill=${bgcolor.value} d="m${ n*100 } 0h102v100h-102v-100m91 42a6 6 90 00-4-10l-22-1a1 1 90 01-1 0l-8-21a6 6 90 00-11 0l-8 21a1 1 90 01-1 1l-22 1a6 6 90 00-4 10l18 14a1 1 90 010 1l-6 22a6 6 90 008 6l19-13a1 1 90 011 0l19 13a6 6 90 006 0a6 6 90 002-6l-6-22a1 1 90 010-1z"/>`) +
124 + repeat(this.stars * 2, (i, n) => `<rect x=${ n*50 } n=${n} opacity=0 width=50 height=100 ` +
125 + ` onclick="this.closest('star-rating').value=${(n+1)/2}; this.closest('star-rating').dispatchEvent(new Event('click'))" ` +
126 + ` onmouseover="this.closest('star-rating').rating=${(n+1)/2}"/>`) +
127 + "</svg>";
128 + this.rating = rating.value;
129 + this.addEventListener('mouseleave', (e) => {
130 + if (e.target.tagName === 'STAR-RATING') {
131 + e.target.rating = e.target.getAttribute("rating")
132 + }
133 + })
134 + }
135 + });
136 +</script>
137 +{{/html}}
138 +
139 +
140 +
109 109  {{velocity filter="none"}}
110 110  {{html clean="false" wiki="true"}}
111 111  #set ($query = "where (doc.parent is null or doc.parent='') and doc.fullName != 'Main.WebHome' order by doc.name asc")
... ... @@ -122,40 +122,35 @@
122 122  {{/velocity}}
123 123  
124 124  
125 -== Rating Tests ==
126 -
127 -{{velocity}}
128 -$services.ratings.aufgaben.setRating("xwiki:Sandbox.WebHome.WebHome^test", 0)
129 -$services.ratings.aufgaben.getCurrentUserRatings(0, 100, true)
130 -
131 -{{html clean="false" wiki="true"}}
132 -<style>
133 -star-rating { display: inline-block; width: 120px }
134 -</style>
135 -<star-rating stars=5 rating="$average.get().averageVote" rid="test" bgcolor="white" nocolor="lightgrey" color="gold" onclick="rated.call(this)"></star-rating>
136 -{{/html}}
137 -{{/velocity}}
138 -
139 139  {{html clean="false"}}
140 140  <script>
141 - function rated() {
142 - console.log(XWiki.currentDocument.space + ".WebHome")
143 - console.log(this.getAttribute("rating"));
144 - sendRate(this.getAttribute("rid"), parseInt(this.getAttribute("rating")));
145 - }
146 - var sendRate = function (rid, vote) {
147 - fetch(new XWiki.Document('WebHome', 'Macros.Aufgabenbewertung').getURL('get') + "?outputSyntax=plain", {
148 - method: "POST",
149 - headers: { "Content-Type": "application/json"},
150 - body: JSON.stringify({
151 - vote: vote,
152 - doc: XWiki.currentDocument.space + ".WebHome",
153 - id: rid,
154 - form_token: document.documentElement.getAttribute("data-xwiki-form-token")
155 - })
156 - }).then(data => {
157 - console.log(data.json())
159 + customElements.define("star-rating", class extends HTMLElement {
160 + set rating(rate) {
161 + if (!String(rate).includes("%")) rate = Number(rate) / this.stars * 100 + "%";
162 + this.querySelector(":nth-child(2)").setAttribute("width", rate); //2nd rect
163 + }
164 + set value(v) {
165 + this.setAttribute("rating", v);
166 + }
167 + connectedCallback() {
168 + let {bgcolor,stars,nocolor,color,rating} = this.attributes;
169 + let repeat = (count, func) => Array(count).fill().map(func);
170 + this.stars = ~~stars.value || 5;
171 + this.innerHTML = `<svg viewBox="0 0 ${this.stars*100} 100" style=cursor:pointer>` +
172 + `<rect height=100 fill=${nocolor.value} width=100% />` +
173 + `<rect height=100 fill=${color.value} />` +
174 + repeat(this.stars , (i, n) => `<path fill=${bgcolor.value} d="m${ n*100 } 0h102v100h-102v-100m91 42a6 6 90 00-4-10l-22-1a1 1 90 01-1 0l-8-21a6 6 90 00-11 0l-8 21a1 1 90 01-1 1l-22 1a6 6 90 00-4 10l18 14a1 1 90 010 1l-6 22a6 6 90 008 6l19-13a1 1 90 011 0l19 13a6 6 90 006 0a6 6 90 002-6l-6-22a1 1 90 010-1z"/>`) +
175 + repeat(this.stars * 2, (i, n) => `<rect x=${ n*50 } n=${n} opacity=0 width=50 height=100 ` +
176 + ` onclick="this.closest('star-rating').value=${(n+1)/2}; this.closest('star-rating').dispatchEvent(new Event('click'))" ` +
177 + ` onmouseover="this.closest('star-rating').rating=${(n+1)/2}"/>`) +
178 + "</svg>";
179 + this.rating = rating.value;
180 + this.addEventListener('mouseleave', (e) => {
181 + if (e.target.tagName === 'STAR-RATING') {
182 + e.target.rating = e.target.getAttribute("rating")
183 + }
184 + })
185 + }
158 158   });
159 - }
160 160  </script>
161 161  {{/html}}