name der Text für die Beschriftung festgelegt wird. Die Platzhalter \\(...\\) bewirken, dass der Text als LaTeX-Formel angezeigt wird. In einer solchen Formelumgebung müssen alle \-Zeichen doppelt verwendet werden (z. B. \\(\\alpha\\) anstelle von \(\alpha\).
Der Code:
[[iframe width="80%" height="100%"]] [[style href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/vs2015.css" /]] [[script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js" /]] [[script]] document.addEventListener("DOMContentLoaded", e=>{ hljs.highlightAll() }); [[/script]]
var board = JXG.JSXGraph.initBoard(divid, {
boundingbox: [-5, 5, 5, -5],
axis: true,
showCopyright: false,
showNavigation: true,
defaultAxes: {
x: {
name: "\\(x\\)",
withLabel: true,
label: {
position: 'rt',
offset: [-5, 15],
anchorX: 'right'
}
},
y: {
name: "\\(y\\)",
withLabel: true,
label: {
position: 'rt',
offset: [15, -5],
anchorX: 'right'
}
}
}
});
Die Grafik:
[[jsxgraph width="70%" aspect-ratio="1/1"]] var board = JXG.JSXGraph.initBoard(divid, { boundingbox: [-5, 5, 5, -5], axis: true, showCopyright: false, showNavigation: true, defaultAxes: { x: { name: "\\(x\\)", withLabel: true, label: { position: 'rt', offset: [-5, 15], anchorX: 'right' } }, y: { name: "\\(y\\)", withLabel: true, label: { position: 'rt', offset: [15, -5], anchorX: 'right' } } } }); [[/jsxgraph]]Mehr zum JSXGraph-Objekttyp image ist in der Dokumentation von JSXGraph zu finden: https://jsxgraph.uni-bayreuth.de/docs/symbols/Image.html
Es ist möglich, Sciebo zu nutzen, um Fotos in JSXGraph-Grafiken zu verwenden. Dafür müssen die folgenden Schritte
befolgt werden:Anleitung: Ein Bild in Sciebo hosten
Dann ist der Link bereits in Ihrer Zwischenablage./download erweitern (z. B.
https://hs-rw.sciebo.de/s/wVfula4vf0P10WM/download)
Mehr zum JSXGraph-Objekttyp image ist in der Dokumentation von JSXGraph zu finden: https://jsxgraph.uni-bayreuth.de/docs/symbols/Image.html
Es ist möglich, Sciebo zu nutzen, um Fotos in JSXGraph-Grafiken zu verwenden. Dafür müssen die folgenden Schritte befolgt werden. Beachten Sie aber, dass mit Sciebo gehostete Bilder aktuell aus Sicherheitsgründen nicht im Prüfungsmoodle in den E-Assessment-Räumen geladen werden können.Anleitung: Ein Bild in Sciebo hosten
Dann ist der Link bereits in Ihrer Zwischenablage./download erweitern (z. B. https://hs-rw.sciebo.de/s/wVfula4vf0P10WM/download)
Der Code:
[[iframe width="100%" height="100%"]] [[style href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/vs2015.css" /]] [[script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js" /]] [[script]] document.addEventListener("DOMContentLoaded", e=>{ hljs.highlightAll() }); [[/script]]
var board = JXG.JSXGraph.initBoard(divid, {
boundingbox: [-10, 10, 10, -10],
axis:true
});
var image = board.create('image',['https://hs-rw.sciebo.de/s/wVfula4vf0P10WM/download',
[-10,-10], [20,20]
],{
fixed:true,
highlight:false
});
Die Grafik:
[[jsxgraph width="70%" aspect-ratio="1/1"]] var board = JXG.JSXGraph.initBoard(divid, { boundingbox: [-10, 10, 10, -10], axis:true }); var image = board.create('image',['https://hs-rw.sciebo.de/s/wVfula4vf0P10WM/download', [-10,-10], [20,20]],{ fixed:true, highlight:false }); [[/jsxgraph]][[input:ans1]] [[validation:ans1]]
]]>
In der Abbildung sehen Sie einen Boxplot.
Bitte geben Sie eine Liste von mindestens acht unterschiedlichen reellen
Zahlen an, sodass der Boxplot diesen Datensatz beschreibt. Klicken Sie
dann auf "Prüfen".
Wenn Sie mit der Maus über die einzelnen Kennwerte des Boxplots fahren, werden deren Werte eingeblendet. Auf Touch-Screens müssen die Kennwerte angetippt werden.
[[jsxgraph height='200px']] const boxplotColor = {#boxplot_aufgabenstellung#}; //Farbe des Boxplots const boxplot_height = 1.6; // Höhe des Boxplots const antennen_height = 0.8; // Höhe der Antennen des Boxplots const board = JXG.JSXGraph.initBoard(divid, { axis:true, boundingbox: [{#mini-0.2*ampl#}, 2, {#maxi+0.2*ampl#}, -2], showCopyright:false, showNavigation:false, zoom:{enabled:false}, pan:{enabled:false}, defaultAxes:{ x:{lastArrow:false, ticks:{drawZero:true} }, y:{lastArrow:false, visible:false, ticks:{drawLabels:false, drawZero:true} } } }); // Setze Hintergrundfarbe auf weiß: board.renderer.container.style.backgroundColor = '#fff'; // Punkte zur Konstruktion der Box: const pol = board.create('point',[{#uquantil#},()=>boxplot_height/2],{ visible:false, fixed:true }); const pul = board.create('point',[{#uquantil#},()=>0-boxplot_height/2],{ visible:false, fixed:true }); const por = board.create('point',[{#oquantil#},()=>boxplot_height/2],{ visible:false, fixed:true }); const pur = board.create('point',[{#oquantil#},()=>0-boxplot_height/2],{ visible:false, fixed:true }); // === Linke Antenne === const grenze_links_text = board.create('text',[ {#antenne_links-1#}, ()=>0+boxplot_height/2+0.4, ()=>'Linke Antenne = '+{#antenne_links#} ],{ visible:false, fixed:true, color:boxplotColor }); const grenze_links = board.create('segment',[ [{#antenne_links#},()=>0-antennen_height/2], [{#antenne_links#},()=>0+antennen_height/2] ],{ fixed:true, strokeWidth:3, strokeColor:boxplotColor }); // Eventlistener für Maus-Hovering grenze_links.on('over', function(e){ grenze_links_text.setAttribute({visible:true}); }); grenze_links.on('out', function(e){ grenze_links_text.setAttribute({visible:false}); }); // Eventlistener für Touch let grenze_linksActive = false; grenze_links.on('down', function(e){ if(grenze_linksActive){ grenze_links_text.setAttribute({visible:false}); } else{ grenze_links_text.setAttribute({visible:true}); } grenze_linksActive = !grenze_linksActive; }); // === Rechte Antenne === const grenze_rechts_text = board.create('text',[ {#antenne_rechts-1#}, ()=>0+boxplot_height/2+0.4, ()=>'Rechte Antenne = '+{#antenne_rechts#} ],{ visible:false, fixed:true, color:boxplotColor }); const grenze_rechts = board.create('segment',[ [{#antenne_rechts#},()=>0-antennen_height/2], [{#antenne_rechts#},()=>0+antennen_height/2] ],{ fixed:true, strokeWidth:3, strokeColor:boxplotColor }); // Eventlistener für Maus-Hovering grenze_rechts.on('over', function(e){ grenze_rechts_text.setAttribute({visible:true}); }); grenze_rechts.on('out', function(e){ grenze_rechts_text.setAttribute({visible:false}); }); // Eventlistener für Touch const grenze_rechtsActive = false; grenze_rechts.on('down', function(e){ if(grenze_rechtsActive){ grenze_rechts_text.setAttribute({visible:false}); } else{ grenze_rechts_text.setAttribute({visible:true}); } grenze_rechtsActive = !grenze_rechtsActive; }); // === Grundlinien === const grundlinie_links = board.create('segment',[ [{#antenne_links#},0], [{#uquantil#},0] ],{ fixed:true, strokeColor:boxplotColor, highlight:false }); const grundlinie_rechts = board.create('segment',[ [{#oquantil#},0], [{#antenne_rechts#},0] ],{ fixed:true, strokeColor:boxplotColor, highlight:false }); // === Median === const median_text = board.create('text',[ {#med-1#}, ()=>0+boxplot_height/2+0.4, ()=>'Median ='+{#med#} ],{ visible:false, fixed:true, color:boxplotColor }); const median = board.create('segment',[ [{#med#},()=>0-boxplot_height/2], [{#med#},()=>0+boxplot_height/2] ],{ fixed:true, strokeColor:boxplotColor }); // Eventlistener für Maus-Hovering median.on('over', function(e){ median_text.setAttribute({visible:true}); }); median.on('out', function(e){ median_text.setAttribute({visible:false}); }); // Eventlistener für Touch let medianActive = false; median.on('down', function(e){ if(medianActive){ median_text.setAttribute({visible:false}); } else{ median_text.setAttribute({visible:true}); } medianActive = !medianActive; }); // === Box === const uquantil_text = board.create('text',[ {#uquantil-1#}, ()=>0+boxplot_height/2+0.4, ()=>'Unteres Quartil = '+{#uquantil#} ],{ visible:false, fixed:true, color:boxplotColor }); const oquantil_text = board.create('text',[ {#oquantil-1#}, ()=>0+boxplot_height/2+0.4, ()=>'Oberes Quartil = '+{#oquantil#} ],{ visible:false, fixed:true, color:boxplotColor }); const box = board.create('polygon',[pol,por,pur,pul],{ fillColor:boxplotColor, highlight:false, borders:{strokeWidth:2, highlightStrokeColor:'grey', strokeColor:boxplotColor} }); box.borders[2].setAttribute({highlight:false}); box.borders[0].setAttribute({highlight:false}); // Eventlistener für Mouse-Hovering box.borders[3].on('over', function(e){ uquantil_text.setAttribute({visible:true}); }); box.borders[3].on('out', function(e){ uquantil_text.setAttribute({visible:false}); }); // Eventlistener für Touch let uquantilActive = false; box.borders[3].on('down', function(e){ if(uquantilActive){ uquantil_text.setAttribute({visible:false}); } else{ uquantil_text.setAttribute({visible:true}); } uquantilActive = !uquantilActive; }); // Eventlistener für Mouse-Hovering box.borders[1].on('over', function(e){ oquantil_text.setAttribute({visible:true}); }); box.borders[1].on('out', function(e){ oquantil_text.setAttribute({visible:false}); }); // Eventlistener für Touch let oquantilActive = false; box.borders[1].on('down', function(e){ if(oquantilActive){ oquantil_text.setAttribute({visible:false}); } else{ oquantil_text.setAttribute({visible:true}); } oquantilActive = !oquantilActive; }); [[/jsxgraph]]Antwort:
Hinweis: Bitte geben Sie die Liste mit eckigen Klammern an, z. B.
[1,2,3]
[a,b,c,...]
Bitte geben Sie eine Liste an und klicken Sie dann erneut auf "Prüfen".
]]>Bitte geben Sie eine Liste unterschiedlicher Werte an und klicken Sie dann erneut auf "Prüfen".
]]>Im Boxplot aus der Aufgabenstellung ist kein maximaler Wert als Ausreißer eingezeichnet. Der Boxplot, der sich aus Ihren Daten ergibt, hat aber einen solchen Wert.
]]>Bitte klicken Sie auf den folgenden Button um fortzufahren:
[[ else ]]Herzlichen Glückwunsch, Sie sind am Ende der Aufgabe angelangt! Jetzt sollten Sie zu einem gegebenen Boxplot einen passenden Datensatz finden können.
[[/ if ]]]]>Bitte klicken Sie auf den folgenden Button um fortzufahren:
]]>Bitte geben Sie eine Liste reeller Zahlen an und klicken Sie dann erneut auf "Prüfen".
]]>Bitte geben einen Datensatz an, der zu dem gegebenen Boxplot passt. Klicken Sie dann wieder auf "Prüfen".
]]>Bitte geben Sie eine Liste mit mindestens acht unterschiedlichen Werten an und klicken Sie dann erneut auf "Prüfen".
]]>In der folgenden Abbildung sehen Sie unten den in der Aufgabe gegebenen Boxplot. Darüber sehen Sie die von Ihnen angegebenen Daten inkl. des sich daraus ergebenen Boxplots – wie Sie sehen stimmen die beiden überein.
[[jsxgraph]] JXG.Options.line.strokeWidth = 2; JXG.Options.line.dash = 1; JXG.Options.line.straightFirst = false; JXG.Options.segment.dash = 0; // Verwendete Farben: const upperColor = {#boxplot_antwort_1#}; // Farbe des Boxplots aus der ersten Antwort const lowerColor = {#boxplot_aufgabenstellung#}; //Farbe des unteren Boxplots aus der Aufgabenstellung const datenpunkte_farbe = {#datenpunkte#}; // Farbe Datenpunkte erste Antwort const labelBackgroundColor2 = {#label_background#}; // Ändert Schriftfarbe der "Legende" document.querySelectorAll('.oer-aufgabe-23_farbe_oben').forEach(el=>el.style.color=upperColor); document.querySelectorAll('.oer-aufgabe-23_farbe_unten').forEach(el=>el.style.color=lowerColor); const boxplot_height = 1.2; // Höhe des Boxplots aus der Aufgabenstellung const antennen_height = 0.6; // Höhe der Antennen des Boxplots aus der Aufgabenstellung const achse2_y = 2; // y-Position der zweiten x-Achse (für den Boxplot aus der Antwort) const boxplot_height_ans = 1.2; // Höhe des Boxplots aus der Antwort const antennen_height_ans = 0.6; // Höhe der Antennen des Boxplots aus der Antwort const datapoints_y = 2; // y-Position der Datenpunkte const ende_hilfslinien = -1.3; // Unteres Ende der Hilfslinien const highest_position = Math.max(achse2_y+0.5*boxplot_height+0.4, datapoints_y+0.4); const mini_global = {#float(mini_global)#}; const ampl_global = {#float(ampl_global)#}; const maxi_global = {#float(maxi_global)#}; const uquantil_ans = {#float(uquantil_ans)#}; const oquantil_ans = {#float(oquantil_ans)#}; const antenne_links_ans = {#float(antenne_links_ans)#}; const antenne_rechts_ans = {#float(antenne_rechts_ans)#}; const med_ans = {#float(med_ans)#}; const ausreisser_x_array = {#float(ausreisser_punkte_x_ans)#}; const datapoints_x_array = {#float(L2)#}; const uquantil = {#float(uquantil)#}; const oquantil = {#float(oquantil)#}; const antenne_links = {#float(antenne_links)#}; const antenne_rechts = {#float(antenne_rechts)#}; const med = {#float(med)#} const ausreisser_oben_wert_ans = {#float(ausreisser_oben_wert_ans)#}; const ausreisser_unten_wert_ans = {#float(ausreisser_unten_wert_ans)#}; const board = JXG.JSXGraph.initBoard(divid, { axis:true, boundingbox: [mini_global-0.25*ampl_global, highest_position+0.5, maxi_global+0.2*ampl_global, -2], showCopyright:false, showNavigation:false, defaultAxes:{ x:{lastArrow:false, ticks:{drawZero:true} }, y:{lastArrow:false, visible:false, ticks:{drawLabels:false, drawZero:true} } } }); // Setze Hintergrundfarbe auf weiß: board.renderer.container.style.backgroundColor = '#fff'; // === Anstatt der automatisch angezeigten Koordinaten für Punkte soll das Label in der Form "Wert = X" erscheinen === board.highlightInfobox = function(x,y,el) { this.infobox.setText('Wert = ' + x); this.infobox.rendNode.style.color = 'black'; this.infobox.rendNode.style.padding = '5px'; this.infobox.rendNode.style.backgroundColor = 'white'; }; // === Checkboxes === const checkbox = board.create('checkbox',[mini_global,-1.5, 'Zeige/verberge Datenpunkte'],{ checked:true, fixed:true }); const checkbox_Linien = board.create('checkbox',[mini_global,-1.8, 'Zeige/verberge Hilfslinien'],{ checked:false, fixed:true }); // ==================================================== // ================ Boxplot aus der Antwort =========== // ==================================================== // === Beschriftung oberer Boxplot === const beschriftung_ans = board.create('text',[ board.getBoundingBox()[0], achse2_y, 'BoxplotWenn Sie mit der Maus über die einzelnen Kennwerte der beiden Boxplots fahren, werden deren Werte eingeblendet. Auf Touch-Screens müssen die Kennwerte angetippt werden.
Die grünen gestrichelten Hilfslinien, die Sie mithilfe der Checkbox aktivieren können, zeigen Ihnen, dass die Kennwerte jeweils übereinstimmen.
Die folgende Checkliste ist eine Übersicht über die Kennziffern der Boxplots. Die grünen Haken kennzeichnen, dass die jeweiligen Werte beider Boxplots übereinstimmen. Wenn Sie auf die Kenngrößen klicken, wird Ihnen eine Erklärung angezeigt.
]]>
In der folgenden Abbildung sehen Sie unten den in der Aufgabe gegebenen Boxplot. Darüber sehen Sie die von Ihnen angegebenen Daten inkl. des sich daraus ergebenen Boxplots.
[[jsxgraph]]
JXG.Options.line.strokeWidth = 2;
JXG.Options.line.dash = 1;
JXG.Options.line.straightFirst = false;
JXG.Options.segment.dash = 0;
// Verwendete Farben:
const upperColor = {#boxplot_antwort_1#}; // Farbe des Boxplots aus der ersten Antwort
const lowerColor = {#boxplot_aufgabenstellung#}; //Farbe des unteren Boxplots aus der Aufgabenstellung
const datenpunkte_farbe = {#datenpunkte#}; // Farbe Datenpunkte erste Antwort
const labelBackgroundColor2 = {#label_background#};
// Ändert Schriftfarbe der "Legende"
document.querySelectorAll('.oer-aufgabe-23_farbe_oben').forEach(el=>el.style.color=upperColor);
document.querySelectorAll('.oer-aufgabe-23_farbe_unten').forEach(el=>el.style.color=lowerColor);
const boxplot_height = 1.2; // Höhe des Boxplots aus der Aufgabenstellung
const antennen_height = 0.6; // Höhe der Antennen des Boxplots aus der Aufgabenstellung
const achse2_y = 2; // y-Position der zweiten x-Achse (für den Boxplot aus der Antwort)
const boxplot_height_ans = 1.2; // Höhe des Boxplots aus der Antwort
const antennen_height_ans = 0.6; // Höhe der Antennen des Boxplots aus der Antwort
const datapoints_y = 2; // y-Position der Datenpunkte
const ende_hilfslinien = -1.3; // Unteres Ende der Hilfslinien
const highest_position = Math.max(achse2_y+0.5*boxplot_height+0.4, datapoints_y+0.4);
const mini_global = {#float(mini_global)#};
const ampl_global = {#float(ampl_global)#};
const maxi_global = {#float(maxi_global)#};
const uquantil_ans = {#float(uquantil_ans)#};
const oquantil_ans = {#float(oquantil_ans)#};
const antenne_links_ans = {#float(antenne_links_ans)#};
const antenne_rechts_ans = {#float(antenne_rechts_ans)#};
const med_ans = {#float(med_ans)#};
const ausreisser_x_array = {#float(ausreisser_punkte_x_ans)#};
const datapoints_x_array = {#float(L2)#};
const uquantil = {#float(uquantil)#};
const oquantil = {#float(oquantil)#};
const antenne_links = {#float(antenne_links)#};
const antenne_rechts = {#float(antenne_rechts)#};
const med = {#float(med)#}
const ausreisser_oben_wert_ans = {#float(ausreisser_oben_wert_ans)#};
const ausreisser_unten_wert_ans = {#float(ausreisser_unten_wert_ans)#};
const board = JXG.JSXGraph.initBoard(divid, {
axis:true,
boundingbox: [mini_global-0.25*ampl_global, highest_position+0.5, maxi_global+0.2*ampl_global, -2],
showCopyright:false,
showNavigation:false,
defaultAxes:{
x:{lastArrow:false,
ticks:{drawZero:true}
},
y:{lastArrow:false,
visible:false,
ticks:{drawLabels:false, drawZero:true}
}
}
});
// Setze Hintergrundfarbe auf weiß:
board.renderer.container.style.backgroundColor = '#fff';
// === Anstatt der automatisch angezeigten Koordinaten für Punkte soll das Label in der Form "Wert = X" erscheinen ===
board.highlightInfobox = function(x,y,el) {
this.infobox.setText('Wert = ' + x);
this.infobox.rendNode.style.color = 'black';
this.infobox.rendNode.style.padding = '5px';
this.infobox.rendNode.style.backgroundColor = 'white';
};
// === Checkboxes ===
const checkbox = board.create('checkbox',[mini_global,-1.5, 'Zeige/verberge Datenpunkte'],{
checked:true,
fixed:true
});
const checkbox_Linien = board.create('checkbox',[mini_global,-1.8, 'Zeige/verberge Hilfslinien'],{
checked:false,
fixed:true
});
// ====================================================
// ================ Boxplot aus der Antwort ===========
// ====================================================
// === Beschriftung oberer Boxplot ===
const beschriftung_ans = board.create('text',[
board.getBoundingBox()[0],
achse2_y,
'Boxplot
aus Ihrer
Antwort'
],{
fixed:true,
color:upperColor,
highlight:false
});
beschriftung_ans.rendNode.style.background=labelBackgroundColor2;
beschriftung_ans.rendNode.style.padding="3px";
// === Obere Achse ===
const achse2 = board.create('axis', [[0, achse2_y], [1, achse2_y]],{ticks:{drawLabels:false}, lastArrow:false});
// ==== Unsichtbare Punkte zur Konstruktion der Box ====
const polans = board.create('point',[
uquantil_ans,
()=>achse2_y+boxplot_height_ans/2
],{
visible:false,
fixed:true
});
const pulans = board.create('point',[
uquantil_ans,
()=>achse2_y-boxplot_height_ans/2
],{
visible:false,
fixed:true
});
const porans = board.create('point',[
oquantil_ans,
()=>achse2_y+boxplot_height_ans/2
],{
visible:false,
fixed:true
});
const purans = board.create('point',[
oquantil_ans,
()=>achse2_y-boxplot_height_ans/2
],{
visible:false,
fixed:true
});
// === Linke Antenne ===
const grenze_links_ans_text = board.create('text',[
antenne_links_ans-1,
()=>achse2_y+boxplot_height_ans/2+0.4,
()=>'Linke Antenne = '+antenne_links_ans
],{
visible:false,
fixed:true,
color:upperColor
});
const grenze_links_ans = board.create('segment',[
[antenne_links_ans, ()=>achse2_y-antennen_height_ans/2],
[antenne_links_ans, ()=>achse2_y+antennen_height_ans/2]
],{
fixed:true,
strokeWidth:3,
strokeColor:upperColor
});
// Eventlistener für Mouse-Hovering
grenze_links_ans.on('over', function(e){
grenze_links_ans_text.setAttribute({visible:true});
});
grenze_links_ans.on('out', function(e){
grenze_links_ans_text.setAttribute({visible:false});
});
// Eventlistener für Touch
let grenze_links_ansActive = false;
grenze_links_ans.on('down', function(e){
if(grenze_links_ansActive){
grenze_links_ans_text.setAttribute({visible:false});
} else{
grenze_links_ans_text.setAttribute({visible:true});
}
grenze_links_ansActive = !grenze_links_ansActive;
});
// === Rechte Antenne ===
const grenze_rechts_ans_text = board.create('text',[
antenne_rechts_ans-1,
()=>achse2_y+boxplot_height_ans/2+0.4,
()=>'Rechte Antenne = '+antenne_rechts_ans
],{
visible:false,
fixed:true,
color:upperColor
});
const grenze_rechts_ans = board.create('segment',[
[antenne_rechts_ans, ()=>achse2_y-antennen_height_ans/2],
[antenne_rechts_ans, ()=>achse2_y+antennen_height_ans/2]
],{
fixed:true,
strokeWidth:3,
strokeColor:upperColor
});
// Eventlistener für Mouse-Hovering
grenze_rechts_ans.on('over', function(e){
grenze_rechts_ans_text.setAttribute({visible:true});
});
grenze_rechts_ans.on('out', function(e){
grenze_rechts_ans_text.setAttribute({visible:false});
});
// Eventlistener für Touch
let grenze_rechts_ansActive = false;
grenze_rechts_ans.on('down', function(e){
if(grenze_rechts_ansActive){
grenze_rechts_ans_text.setAttribute({visible:false});
} else{
grenze_rechts_ans_text.setAttribute({visible:true});
}
grenze_rechts_ansActive = !grenze_rechts_ansActive;
});
// === Grundlinien ===
const grundlinie_links_ans = board.create('segment',[
[antenne_links_ans,achse2_y],
[uquantil_ans,achse2_y]
],{
fixed:true,
strokeColor:upperColor,
highlight:false
});
const grundlinie_rechts_ans = board.create('segment',[
[oquantil_ans,achse2_y],
[antenne_rechts_ans,achse2_y]
],{
fixed:true,
strokeColor:upperColor,
highlight:false
});
// === Median ===
const median_ans_text = board.create('text',[
med_ans-1,
()=>achse2_y+boxplot_height_ans/2+0.4,
()=>'Median = '+med_ans
],{
visible:false,
fixed:true,
color:upperColor
});
var median_ans = board.create('segment',[
[med_ans, ()=>achse2_y-boxplot_height_ans/2],
[med_ans, ()=>achse2_y+boxplot_height_ans/2]
],{
fixed:true,
strokeColor:upperColor
});
// Eventlistener für Mouse-Hovering
median_ans.on('over', function(e){
median_ans_text.setAttribute({visible:true});
});
median_ans.on('out', function(e){
median_ans_text.setAttribute({visible:false});
});
// Eventlistener für Touch
let median_ansActive = false;
median_ans.on('down', function(e){
if(median_ansActive){
median_ans_text.setAttribute({visible:false});
} else{
median_ans_text.setAttribute({visible:true});
}
median_ansActive = !median_ansActive;
});
// === Box ===
const uquantil_ans_text = board.create('text',[
uquantil_ans-1,
()=>achse2_y+boxplot_height_ans/2+0.4,
()=>'Unteres Quartil = '+uquantil_ans
],{
visible:false,
fixed:true,
color:upperColor
});
const oquantil_ans_text = board.create('text',[
oquantil_ans-1,
()=>achse2_y+boxplot_height_ans/2+0.4,
()=>'Oberes Quartil = '+oquantil_ans
],{
visible:false,
fixed:true,
color:upperColor
});
const box_ans = board.create('polygon',[polans,porans,purans,pulans],{
fillColor:upperColor,
highlight:false,
borders:{strokeWidth:2, strokeColor:upperColor, highlightStrokeColor:'grey'}
});
box_ans.borders[2].setAttribute({highlight:false});
box_ans.borders[0].setAttribute({highlight:false});
// Eventlistener für Mouse-Hovering
box_ans.borders[3].on('over', function(e){
uquantil_ans_text.setAttribute({visible:true});
});
box_ans.borders[3].on('out', function(e){
uquantil_ans_text.setAttribute({visible:false});
});
// Eventlistener für Touch
let uquantil_ansActive = false;
box_ans.borders[3].on('down', function(e){
if(uquantil_ansActive){
uquantil_ans_text.setAttribute({visible:false});
} else{
uquantil_ans_text.setAttribute({visible:true});
}
uquantil_ansActive = !uquantil_ansActive;
});
// Eventlistener für Mouse-Hovering
box_ans.borders[1].on('over', function(e){
oquantil_ans_text.setAttribute({visible:true});
});
box_ans.borders[1].on('out', function(e){
oquantil_ans_text.setAttribute({visible:false});
});
// Eventlistener für Touch
let oquantil_ansActive = false;
box_ans.borders[1].on('down', function(e){
if(oquantil_ansActive){
oquantil_ans_text.setAttribute({visible:false});
} else{
oquantil_ans_text.setAttribute({visible:true});
}
oquantil_ansActive = !oquantil_ansActive;
});
// === Ausreißer-Punkte ===
for(let j of ausreisser_x_array){
board.create('point',[j,achse2_y],{
fixed:true,
withLabel:false,
color:upperColor,
showInfobox:false
})
};
// === Datenpunkte ===
for(let j of datapoints_x_array){board.create('point',[j, datapoints_y],{
withLabel:false,
fixed:true,
face:'x',
visible:function(){return checkbox.Value()},
color:datenpunkte_farbe
}) };
// ====================================================
// ============= Boxplot aus der Aufgabenstellung =============
// ====================================================
// === Beschriftung unterer Boxplot ===
const beschriftung_aufg = board.create('text',[
board.getBoundingBox()[0],
0,
'Boxplot
aus der
Aufgaben-
stellung'
],{
fixed:true,
color:lowerColor,
highlight:false
});
beschriftung_aufg.rendNode.style.background=labelBackgroundColor2;
beschriftung_aufg.rendNode.style.padding="3px";
// ==== Unsichtbare Punkte zur Konstruktion der Box ====
const pol = board.create('point',[
uquantil,
()=>boxplot_height/2
],{
visible:false,
fixed:true
});
const pul = board.create('point',[
uquantil,
()=>0-boxplot_height/2
],{
visible:false,
fixed:true
});
const por = board.create('point',[
oquantil,
()=>boxplot_height/2
],{
visible:false,
fixed:true
});
const pur = board.create('point',[
oquantil,
()=>0-boxplot_height/2
],{
visible:false,
fixed:true
});
// === Linke Antenne ===
const grenze_links_text = board.create('text',[
antenne_links-1,
()=>0+boxplot_height/2+0.4,
()=>'Linke Antenne = '+antenne_links
],{
visible:false,
fixed:true,
color:lowerColor});
const grenze_links = board.create('segment',[
[antenne_links, ()=>0-antennen_height/2],
[antenne_links, ()=>0+antennen_height/2]
],{
fixed:true,
strokeWidth:3,
strokeColor:lowerColor
});
// Eventlistener für Mouse-Hovering
grenze_links.on('over', function(e){
grenze_links_text.setAttribute({visible:true});
});
grenze_links.on('out', function(e){
grenze_links_text.setAttribute({visible:false});
});
// Eventlistener für Touch
let grenze_linksActive = false;
grenze_links.on('down', function(e){
if(grenze_linksActive){
grenze_links_text.setAttribute({visible:false});
} else{
grenze_links_text.setAttribute({visible:true});
}
grenze_linksActive = !grenze_linksActive;
});
// === Rechte Antenne ===
const grenze_rechts_text = board.create('text',[
antenne_rechts-1,
()=>0+boxplot_height/2+0.4,
()=>'Rechte Antenne = '+antenne_rechts
],{
visible:false,
fixed:true,
color:lowerColor
});
const grenze_rechts = board.create('segment',[
[antenne_rechts, ()=>0-antennen_height/2],
[antenne_rechts, ()=>0+antennen_height/2]
],{
fixed:true,
strokeWidth:3,
strokeColor:lowerColor
});
// Eventlistener für Mouse-Hovering
grenze_rechts.on('over', function(e){
grenze_rechts_text.setAttribute({visible:true});
});
grenze_rechts.on('out', function(e){
grenze_rechts_text.setAttribute({visible:false});
});
// Eventlistener für Touch
let grenze_rechtsActive = false;
grenze_rechts.on('down', function(e){
if(grenze_rechtsActive){
grenze_rechts_text.setAttribute({visible:false});
} else{
grenze_rechts_text.setAttribute({visible:true});
}
grenze_rechtsActive = !grenze_rechtsActive;
});
// === Grundlinien ===
const grundlinie_links = board.create('segment',[
[antenne_links,0],
[uquantil,0]
],{
fixed:true,
strokeColor:lowerColor,
highlight:false
});
const grundlinie_rechts = board.create('segment',[
[oquantil,0],
[antenne_rechts,0
]],{
fixed:true,
strokeColor:lowerColor,
highlight:false
});
// === Median ===
const median_text = board.create('text',[
med-1,
()=>0+boxplot_height/2+0.4,
()=>'Median ='+med
],{
visible:false,
fixed:true,
color:lowerColor
});
const median = board.create('segment',[
[med, ()=>0-boxplot_height/2],
[med, ()=>0+boxplot_height/2]
],{
fixed:true,
strokeColor:lowerColor
});
// Eventlistener für Mouse-Hovering
median.on('over', function(e){
median_text.setAttribute({visible:true});
});
median.on('out', function(e){
median_text.setAttribute({visible:false});
});
// Eventlistener für Touch
let medianActive = false;
median.on('down', function(e){
if(medianActive){
median_text.setAttribute({visible:false});
} else{
median_text.setAttribute({visible:true});
}
medianActive = !medianActive;
});
// === Box ===
const uquantil_text = board.create('text',[
uquantil-1,
()=>0+boxplot_height/2+0.4,
()=>'Unteres Quartil = '+uquantil
],{
visible:false,
fixed:true,
color:lowerColor
});
const oquantil_text = board.create('text',[
oquantil-1,
()=>0+boxplot_height/2+0.4,
()=>'Oberes Quartil = '+oquantil
],{
visible:false,
fixed:true,
color:lowerColor
});
var box = board.create('polygon',[pol,por,pur,pul],{
fillColor:lowerColor,
highlight:false,
borders:{strokeWidth:2, highlightStrokeColor:'grey', strokeColor:lowerColor}
});
box.borders[2].setAttribute({highlight:false});
box.borders[0].setAttribute({highlight:false});
// Eventlistener für Mouse-Hovering
box.borders[3].on('over', function(e){
uquantil_text.setAttribute({visible:true});
});
box.borders[3].on('out', function(e){
uquantil_text.setAttribute({visible:false});
});
// Eventlistener für Touch
let uquantilActive = false;
box.borders[3].on('down', function(e){
if(uquantilActive){
uquantil_text.setAttribute({visible:false});
} else{
uquantil_text.setAttribute({visible:true});
}
uquantilActive = !uquantilActive;
});
// Eventlistener für Mouse-Hovering
box.borders[1].on('over', function(e){
oquantil_text.setAttribute({visible:true});
});
box.borders[1].on('out', function(e){
oquantil_text.setAttribute({visible:false});
});
// Eventlistener für Touch
let oquantilActive = false;
box.borders[1].on('down', function(e){
if(oquantilActive){
oquantil_text.setAttribute({visible:false});
} else{
oquantil_text.setAttribute({visible:true});
}
oquantilActive = !oquantilActive;
});
// ===================================================
// ===================== Hilfslinien: =====================
// ===================================================
const grenze_links_ans_linie = board.create('segment',[
[antenne_links_ans,ende_hilfslinien],
[antenne_links_ans, ()=>achse2_y-antennen_height/2]
],{
fixed:true,
color:()=>(antenne_links_ans==antenne_links) ? 'green' : ({#ausreisser_unten_orange and ausreisser_unten_wert_ans="keiner"#}) ? 'orange' : 'red',
visible:()=>checkbox_Linien.Value(),
highlight:false,
dash:()=>(antenne_links_ans==antenne_links) ? 2 : 1
});
const uquartil_linie = board.create('segment',[pulans,[uquantil_ans, ende_hilfslinien]],{
fixed:true,
color:()=> (polans.X()==pol.X()) ? 'green' : 'red',
visible:()=>checkbox_Linien.Value(),
highlight:false,
dash:()=> (polans.X()==pol.X()) ? 2 : 1
});
const median_ans_linie = board.create('segment',[
[med_ans, ()=>achse2_y-boxplot_height/2],
[med_ans,ende_hilfslinien]
],{
fixed:true,
color:()=>(med_ans==med) ? 'green' : 'red',
visible:()=>checkbox_Linien.Value(),
highlight:false,
dash:()=> (med_ans==med) ? 2 : 1
});
const oquartil_linie = board.create('segment',[
purans,
[oquantil_ans,ende_hilfslinien]
],{
fixed:true,
color:()=> (porans.X()==por.X()) ? 'green' : 'red',
visible:()=>checkbox_Linien.Value(),
highlight:false,
dash:()=> (porans.X()==por.X()) ? 2 : 1
});
const grenze_rechts_ans_linie = board.create('segment',[
[antenne_rechts_ans,function(){return achse2_y-antennen_height/2}],
[antenne_rechts_ans,ende_hilfslinien]
],{
fixed:true,
color:()=>(antenne_rechts_ans==antenne_rechts) ? 'green' : ({#ausreisser_oben_orange and ausreisser_oben_wert_ans="keiner"#}) ? 'orange' : 'red',
visible:()=>checkbox_Linien.Value(),
highlight:false,
dash:()=> (antenne_rechts_ans==antenne_rechts) ? 2 : 1
});
const ausreisser_rechts_linie = board.create('segment',[
[ausreisser_oben_wert_ans,achse2_y],
[ausreisser_oben_wert_ans,ende_hilfslinien]
],{
fixed:true,
color:()=>({#ausreisser_oben_orange#}) ? 'orange' : 'red',
visible:()=>checkbox_Linien.Value(),
highlight:false,
dash:()=> ({#ausreisser_oben_orange#}) ? 0 : 1
});
const ausreisser_links_linie = board.create('segment',[
[ausreisser_unten_wert_ans,achse2_y],
[ausreisser_unten_wert_ans,ende_hilfslinien]
],{
fixed:true,
color:()=>({#ausreisser_unten_orange#}) ? 'orange' : 'red',
visible:()=>checkbox_Linien.Value(),
highlight:false,
dash:()=> ({#ausreisser_unten_orange#}) ? 0 : 1
});
[[/jsxgraph]]
Wenn Sie mit der Maus über die einzelnen Kennwerte der beiden Boxplots fahren, werden deren Werte eingeblendet. Auf Touch-Screens müssen die Kennwerte angetippt werden.
Die Hilfslinien, die Sie mithilfe der Checkbox aktivieren können, zeigen Ihnen, welche Kennwerte übereinstimmen (grüne gestrichelte Hilfslinien) und welche nicht (rote gepunktete Hilfslinien).
In der folgenden Checkliste können Sie sehen, welche der Kennziffern übereinstimmen. Wenn Sie auf die Kenngrößen klicken, wird Ihnen eine Erklärung angezeigt.
]]>Ihre eingegebene Antwort ist keine Liste in der Form [a,b,c,...]
Bitte geben Sie eine Liste an und klicken Sie dann erneut auf "Prüfen".
]]>Ihre Liste sollte nur unterschiedliche Werte enthalten
Bitte geben Sie eine Liste unterschiedlicher Werte an und klicken Sie dann erneut auf "Prüfen".
]]>Im Boxplot aus der Aufgabenstellung ist kein maximaler Wert als Ausreißer eingezeichnet. Der Boxplot, der sich aus Ihren Daten ergibt, hat aber einen solchen Wert.
]]>Bitte korrigieren Sie Ihre Eingabe und klicken Sie dann erneut auf "Prüfen".
[[ else ]]Herzlichen Glückwunsch, Sie sind am Ende der Aufgabe angelangt! Jetzt sollten Sie zu einem gegebenen Boxplot einen passenden Datensatz finden können.
[[/ if ]]]]>Bitte korrigieren Sie Ihre Eingabe und klicken Sie dann erneut auf "Prüfen".
]]>Zur Erinnerung sehen Sie hier noch einmal die Werte und den Boxplot zu Ihrer allerersten Antwort {@ans1_copy@} . Darunter sehen Sie den Boxplot aus der Aufgabenstellung.
[[jsxgraph]] JXG.Options.line.strokeWidth = 2; JXG.Options.line.dash = 1; JXG.Options.line.straightFirst = false; JXG.Options.segment.dash = 0; // Verwendete Farben: const upperColor = {#boxplot_antwort_1#}; // Farbe des Boxplots aus der ersten Antwort const lowerColor = {#boxplot_aufgabenstellung#}; //Farbe des unteren Boxplots aus der Aufgabenstellung const datenpunkte_farbe_1 = {#datenpunkte#}; // Farbe Datenpunkte erste Antwort const labelBackgroundColor2 = {#label_background#}; // Ändert Schriftfarbe der "Legende" document.querySelectorAll('.oer-aufgabe-23_farbe_oben_2').forEach(el=>el.style.color=upperColor); document.querySelectorAll('.oer-aufgabe-23_farbe_unten_2').forEach(el=>el.style.color=lowerColor); const boxplot_height = 1.2; // Höhe des Boxplots aus der Aufgabenstellung const antennen_height = 0.6; // Höhe der Antennen des Boxplots aus der Aufgabenstellung const achse2_y = 2; // y-Position der zweiten x-Achse (für den Boxplot aus der ersten Antwort) const boxplot_height_ans_1 = 1.2; // Höhe des Boxplots aus der ersten Antwort const antennen_height_ans_1 = 0.6; // Höhe der Antennen des Boxplots aus der ersten Antwort const datapoints2_y_1 = 2; // y-Position der Datenpunkte aus der ersten Antwort const ende_hilfslinien = -1.3; // Unteres Ende der Hilfslinien const highest_position = Math.max(achse2_y+0.5*boxplot_height+0.4, datapoints2_y_1+0.4,achse2_y+0.5*boxplot_height+0.4, datapoints2_y_1+0.4); const mini_global_w = {#float(mini_global_w)#}; const ampl_global_w = {#float(ampl_global_w)#}; const maxi_global_w = {#float(maxi_global_w)#}; const mini_global = {#float(mini_global)#}; const uquantil_ans_1 = {#float(uquantil_ans_1)#}; const oquantil_ans_1 = {#float(oquantil_ans_1)#}; const antenne_links_ans_1 = {#float(antenne_links_ans_1)#}; const antenne_rechts_ans_1 = {#float(antenne_rechts_ans_1)#}; const med_ans_1 = {#float(med_ans_1)#}; const ausreisser_x_array_1 = {#ausreisser_punkte_x_ans_1#}; const datapoints_x_array_1 = {#L2_1#}; const uquantil = {#float(uquantil)#}; const oquantil = {#float(oquantil)#}; const antenne_links = {#float(antenne_links)#}; const antenne_rechts = {#float(antenne_rechts)#}; const med = {#float(med)#} const ausreisser_oben_wert_ans = {#float(ausreisser_oben_wert_ans)#}; const ausreisser_unten_wert_ans = {#float(ausreisser_unten_wert_ans)#}; const board = JXG.JSXGraph.initBoard(divid, { axis:true, boundingbox: [mini_global_w-0.2*ampl_global_w, highest_position+0.5, maxi_global_w+0.2*ampl_global_w, -2], showCopyright:false, showNavigation:false, defaultAxes:{ x:{lastArrow:false, ticks:{drawZero:true} }, y:{lastArrow:false, visible:false, ticks:{drawLabels:false, drawZero:true} } } }); // Setze Hintergrundfarbe auf weiß: board.renderer.container.style.backgroundColor = '#fff'; // === Anstatt der automatisch angezeigten Koordinaten für Punkte soll das Label in der Form "Wert = X" erscheinen === board.highlightInfobox = function(x,y,el) { this.infobox.setText('Wert = ' + x); this.infobox.rendNode.style.color = 'black'; this.infobox.rendNode.style.padding = '5px'; this.infobox.rendNode.style.backgroundColor = 'white'; }; // === Checkboxes === const checkbox = board.create('checkbox',[ mini_global, -1.5, 'Zeige/verberge Datenpunkte' ],{ checked:true, fixed:true }); const checkbox_Linien = board.create('checkbox',[ mini_global, -1.8, 'Zeige/verberge Hilfslinien' ],{ checked:false, fixed:true }); // =========================================================== // ================ Boxplot aus der ersten Antwort =========== // =========================================================== // === Beschriftung mittlerer Boxplot === const beschriftung_ans = board.create('text',[ board.getBoundingBox()[0], achse2_y, 'BoxplotIhr Datensatz enthält folgende Werte, die nicht ausgewertet werden konnten:
\[ {@sequenceify(verboteneZahlen)@} \]Bitte geben Sie eine Liste reeller Zahlen an und klicken Sie dann erneut auf "Prüfen".
]]>Bitte geben einen Datensatz an, der zu dem gegebenen Boxplot passt. Klicken Sie dann wieder auf "Prüfen".
]]>Ihre Liste enthält weniger als acht Werte.
Bitte geben Sie eine Liste mit mindestens acht unterschiedlichen Werten an und klicken Sie dann erneut auf "Prüfen".
]]>Ihre Antwort ist teilweise korrekt.
[[/ if ]]In der folgenden Abbildung sehen Sie oben die von Ihnen angegebenen Daten und den zugehörigen Boxplot aus Ihrer ersten Antwort {@ans1_copy@}. In der Mitte sehen Sie die Daten und den Boxplot aus Ihrer letzten Antwort {@ans1_neu@}. Ganz unten sehen Sie den Boxplot aus der Aufgabenstellung.
[[jsxgraph]] JXG.Options.line.strokeWidth = 2; JXG.Options.line.dash = 1; JXG.Options.line.straightFirst = false; JXG.Options.segment.dash = 0; // Verwendete Farben: const upperColor = {#boxplot_antwort_2#}; // Farbe des Boxplots aus der zweiten Antwort const middleColor = {#boxplot_antwort_1#}; // Farbe des Boxplots aus der ersten Antwort const lowerColor = {#boxplot_aufgabenstellung#}; //Farbe des unteren Boxplots aus der Aufgabenstellung const datenpunkte_farbe = {#datenpunkte#}; // Farbe Datenpunkte letzte Antwort const datenpunkte_farbe_1 = {#datenpunkte#}; // Farbe Datenpunkte erste Antwort const labelBackgroundColor2 = {#label_background#}; // Ändert Schriftfarbe der "Legende" document.querySelectorAll('.oer-aufgabe-23_farbe_oben_2').forEach(el=>el.style.color=upperColor); document.querySelectorAll('.oer-aufgabe-23_farbe_mitte_2').forEach(el=>el.style.color=middleColor); document.querySelectorAll('.oer-aufgabe-23_farbe_unten_2').forEach(el=>el.style.color=lowerColor); const boxplot_height = 1.2; // Höhe des Boxplots aus der Aufgabenstellung const antennen_height = 0.6; // Höhe der Antennen des Boxplots aus der Aufgabenstellung const achse2_y = 4; // y-Position der zweiten x-Achse (für den Boxplot aus der ersten Antwort) const achse3_y = 2; // y-Position der zweiten x-Achse (für den Boxplot aus letzten Antwort) const boxplot_height_ans = 1.2; // Höhe des Boxplots aus der letzten Antwort const boxplot_height_ans_1 = 1.2; // Höhe des Boxplots aus der ersten Antwort const antennen_height_ans = 0.6; // Höhe der Antennen des Boxplots aus der letzten Antwort const antennen_height_ans_1 = 0.6; // Höhe der Antennen des Boxplots aus der ersten Antwort const datapoints2_y = 2; // y-Position der Datenpunkte aus der letzten Antwort const datapoints2_y_1 = 4; // y-Position der Datenpunkte aus der ersten Antwort const ende_hilfslinien = -1.3; // Unteres Ende der Hilfslinien const highest_position = Math.max( achse3_y+0.5*boxplot_height+0.4, datapoints2_y_1+0.4, achse2_y+0.5*boxplot_height+0.4, datapoints2_y+0.4 ); const mini_global_1 = {#float(mini_global_1)#}; const ampl_global_1 = {#float(ampl_global_1)#}; const maxi_global_1 = {#float(maxi_global_1)#}; const mini_global = {#float(mini_global)#}; const uquantil_ans = {#float(uquantil_ans)#}; const oquantil_ans = {#float(oquantil_ans)#}; const antenne_links_ans = {#float(antenne_links_ans)#}; const antenne_rechts_ans = {#float(antenne_rechts_ans)#}; const med_ans = {#float(med_ans)#}; const ausreisser_x_array = {#float(ausreisser_punkte_x_ans)#}; const datapoints_x_array = {#float(L2)#}; const uquantil_ans_1 = {#float(uquantil_ans_1)#}; const oquantil_ans_1 = {#float(oquantil_ans_1)#}; const antenne_links_ans_1 = {#float(antenne_links_ans_1)#}; const antenne_rechts_ans_1 = {#float(antenne_rechts_ans_1)#}; const med_ans_1 = {#float(med_ans_1)#}; const ausreisser_x_array_1 = {#ausreisser_punkte_x_ans_1#}; const datapoints_x_array_1 = {#L2_1#}; const uquantil = {#float(uquantil)#}; const oquantil = {#float(oquantil)#}; const antenne_links = {#float(antenne_links)#}; const antenne_rechts = {#float(antenne_rechts)#}; const med = {#float(med)#} const ausreisser_oben_wert_ans = {#float(ausreisser_oben_wert_ans)#}; const ausreisser_unten_wert_ans = {#float(ausreisser_unten_wert_ans)#}; const board = JXG.JSXGraph.initBoard(divid, { axis:true, boundingbox: [mini_global_1-0.2*ampl_global_1, highest_position+0.5, maxi_global_1+0.2*ampl_global_1, -2], showCopyright:false, showNavigation:false, defaultAxes:{ x:{lastArrow:false, ticks:{drawZero:true} }, y:{lastArrow:false, visible:false, ticks:{drawLabels:false, drawZero:true} } } }); // Setze Hintergrundfarbe auf weiß: board.renderer.container.style.backgroundColor = '#fff'; // === Anstatt der automatisch angezeigten Koordinaten für Punkte soll das Label in der Form "Wert = X" erscheinen === board.highlightInfobox = function(x,y,el) { this.infobox.setText('Wert = ' + x); this.infobox.rendNode.style.color = 'black'; this.infobox.rendNode.style.padding = '5px'; this.infobox.rendNode.style.backgroundColor = 'white'; }; // === Checkboxes === const checkbox = board.create('checkbox',[ mini_global, -1.5, 'Zeige/verberge Datenpunkte' ],{ checked:true, fixed:true }); const checkbox_Linien = board.create('checkbox',[ mini_global, -1.8, 'Zeige/verberge Hilfslinien' ],{ checked:false, fixed:true }); // =========================================================== // ================ Boxplot aus der letzten Antwort ========== // =========================================================== // === Beschriftung oberer Boxplot === const beschriftung_ans = board.create('text',[ board.getBoundingBox()[0], achse3_y, 'BoxplotWenn Sie mit der Maus über die einzelnen Kennwerte der beiden Boxplots fahren, werden deren Werte eingeblendet. Auf Touch-Screens müssen die Kennwerte angetippt werden.
Die grünen gestrichelten Hilfslinien, die Sie mithilfe der Checkbox aktivieren können, zeigen Ihnen, dass die Kennwerte jeweils übereinstimmen.
Die folgende Checkliste ist eine Übersicht über die Kennziffern der Boxplots. Die grünen Haken kennzeichnen, dass die jeweiligen Werte beider Boxplots übereinstimmen. Wenn Sie auf die Kenngrößen klicken, wird Ihnen eine Erklärung angezeigt.
]]>In der folgenden Abbildung sehen Sie oben die von Ihnen angegebenen Daten und den zugehörigen Boxplot aus Ihrer ersten Antwort {@ans1_copy@}. In der Mitte sehen Sie die Daten und den Boxplot aus Ihrer letzten Antwort {@ans1_neu@}. Ganz unten sehen Sie den Boxplot aus der Aufgabenstellung.
[[jsxgraph]] JXG.Options.line.strokeWidth = 2; JXG.Options.line.dash = 1; JXG.Options.line.straightFirst = false; JXG.Options.segment.dash = 0; // Verwendete Farben: const upperColor = {#boxplot_antwort_2#}; // Farbe des Boxplots aus der zweiten Antwort const middleColor = {#boxplot_antwort_1#}; // Farbe des Boxplots aus der ersten Antwort const lowerColor = {#boxplot_aufgabenstellung#}; //Farbe des unteren Boxplots aus der Aufgabenstellung const datenpunkte_farbe = {#datenpunkte#}; // Farbe Datenpunkte letzte Antwort const datenpunkte_farbe_1 = {#datenpunkte#}; // Farbe Datenpunkte erste Antwort const labelBackgroundColor2 = {#label_background#}; // Ändert Schriftfarbe der "Legende" document.querySelectorAll('.oer-aufgabe-23_farbe_oben_2').forEach(el=>el.style.color=upperColor); document.querySelectorAll('.oer-aufgabe-23_farbe_mitte_2').forEach(el=>el.style.color=middleColor); document.querySelectorAll('.oer-aufgabe-23_farbe_unten_2').forEach(el=>el.style.color=lowerColor); const boxplot_height = 1.2; // Höhe des Boxplots aus der Aufgabenstellung const antennen_height = 0.6; // Höhe der Antennen des Boxplots aus der Aufgabenstellung const achse2_y = 4; // y-Position der zweiten x-Achse (für den Boxplot aus der ersten Antwort) const achse3_y = 2; // y-Position der zweiten x-Achse (für den Boxplot aus letzten Antwort) const boxplot_height_ans = 1.2; // Höhe des Boxplots aus der letzten Antwort const boxplot_height_ans_1 = 1.2; // Höhe des Boxplots aus der ersten Antwort const antennen_height_ans = 0.6; // Höhe der Antennen des Boxplots aus der letzten Antwort const antennen_height_ans_1 = 0.6; // Höhe der Antennen des Boxplots aus der ersten Antwort const datapoints2_y = 2; // y-Position der Datenpunkte aus der letzten Antwort const datapoints2_y_1 = 4; // y-Position der Datenpunkte aus der ersten Antwort const ende_hilfslinien = -1.3; // Unteres Ende der Hilfslinien const highest_position = Math.max( achse3_y+0.5*boxplot_height+0.4, datapoints2_y_1+0.4, achse2_y+0.5*boxplot_height+0.4, datapoints2_y+0.4 ); const mini_global_1 = {#float(mini_global_1)#}; const ampl_global_1 = {#float(ampl_global_1)#}; const maxi_global_1 = {#float(maxi_global_1)#}; const mini_global = {#float(mini_global)#}; const uquantil_ans = {#float(uquantil_ans)#}; const oquantil_ans = {#float(oquantil_ans)#}; const antenne_links_ans = {#float(antenne_links_ans)#}; const antenne_rechts_ans = {#float(antenne_rechts_ans)#}; const med_ans = {#float(med_ans)#}; const ausreisser_x_array = {#float(ausreisser_punkte_x_ans)#}; const datapoints_x_array = {#float(L2)#}; const uquantil_ans_1 = {#float(uquantil_ans_1)#}; const oquantil_ans_1 = {#float(oquantil_ans_1)#}; const antenne_links_ans_1 = {#float(antenne_links_ans_1)#}; const antenne_rechts_ans_1 = {#float(antenne_rechts_ans_1)#}; const med_ans_1 = {#float(med_ans_1)#}; const ausreisser_x_array_1 = {#ausreisser_punkte_x_ans_1#}; const datapoints_x_array_1 = {#L2_1#}; const uquantil = {#float(uquantil)#}; const oquantil = {#float(oquantil)#}; const antenne_links = {#float(antenne_links)#}; const antenne_rechts = {#float(antenne_rechts)#}; const med = {#float(med)#} const ausreisser_oben_wert_ans = {#float(ausreisser_oben_wert_ans)#}; const ausreisser_unten_wert_ans = {#float(ausreisser_unten_wert_ans)#}; const board = JXG.JSXGraph.initBoard(divid, { axis:true, boundingbox: [mini_global_1-0.2*ampl_global_1, highest_position+0.5, maxi_global_1+0.2*ampl_global_1, -2], showCopyright:false, showNavigation:false, defaultAxes:{ x:{lastArrow:false, ticks:{drawZero:true} }, y:{lastArrow:false, visible:false, ticks:{drawLabels:false, drawZero:true} } } }); // Setze Hintergrundfarbe auf weiß: board.renderer.container.style.backgroundColor = '#fff'; // === Anstatt der automatisch angezeigten Koordinaten für Punkte soll das Label in der Form "Wert = X" erscheinen === board.highlightInfobox = function(x,y,el) { this.infobox.setText('Wert = ' + x); this.infobox.rendNode.style.color = 'black'; this.infobox.rendNode.style.padding = '5px'; this.infobox.rendNode.style.backgroundColor = 'white'; }; // === Checkboxes === const checkbox = board.create('checkbox',[ mini_global, -1.5, 'Zeige/verberge Datenpunkte' ],{ checked:true, fixed:true }); const checkbox_Linien = board.create('checkbox',[ mini_global, -1.8, 'Zeige/verberge Hilfslinien' ],{ checked:false, fixed:true }); // =========================================================== // ================ Boxplot aus der letzten Antwort ========== // =========================================================== // === Beschriftung oberer Boxplot === const beschriftung_ans = board.create('text',[ board.getBoundingBox()[0], achse3_y, 'BoxplotWenn Sie mit der Maus über die einzelnen Kennwerte der beiden Boxplots fahren, werden deren Werte eingeblendet. Auf Touch-Screens müssen die Kennwerte angetippt werden.
Die Hilfslinien, die Sie mithilfe der Checkbox aktivieren können, zeigen Ihnen, welche Kennwerte übereinstimmen (grüne gestrichelte Hilfslinien) und welche nicht (rote gepunktete Hilfslinien).
In der folgenden Checkliste können Sie sehen, welche der Kennziffern übereinstimmen. Wenn Sie auf die Kenngrößen klicken, wird Ihnen eine Erklärung angezeigt.
]]>| Kennziffer | Boxplot aus Ihrem Datensatz | Boxplot aus der Aufgabenstellung |
|---|---|---|
| Linke Antenne | {@untere_grenze_SAns_symbol@} | {@untere_grenze_TAns_symbol@} |
| Unteres Quartil | {@unteres_quartil_SAns_symbol@} | {@unteres_quartil_TAns_symbol@} |
| Median | {@median_SAns_symbol@} | {@median_TAns_symbol@} |
| Oberes Quartil | {@oberes_quartil_SAns_symbol@} | {@oberes_quartil_TAns_symbol@} |
| Rechte Antenne | {@obere_grenze_SAns_symbol@} | {@obere_grenze_TAns_symbol@} |
Klicken Sie auf den folgenden Button, um die ursprüngliche Aufgabenstellung erneut zu bearbeiten:
]]>Bitte versuchen Sie es erneut und klicken Sie dann auf "Prüfen".
]]>Der Code:
[[iframe width="100%" height="100%"]] [[style href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/vs2015.css" /]] [[script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js" /]] [[script]] document.addEventListener("DOMContentLoaded", e=>{ hljs.highlightAll() }); [[/script]]
const board = JXG.JSXGraph.initBoard(divid, {
boundingbox:[-10,10,10,-10],
axis:true,
showCopyright:false
});
/* Wenn die Seite komplett geladen ist soll ein bestimmter Code ausgeführt werden: */
document.addEventListener("DOMContentLoaded", e=>{
/* Im Folgenden werden Funktionen aus der STACK-eigenen Bibliothek STACK-JS genutzt.
Die Funktion bittet STACK um Zugriff auf das Eingabefeld ans1. */
var promiseforaninput = stack_js.request_access_to_input("ans1", true);
/* Wenn der Zugriff gewährt wird, soll ein bestimmter Code ausgeführt werden: */
promiseforaninput.then((id) => {
/* "input" ist das Eingabefeld. */
let input = document.getElementById(id);
/* Die Variablen "liste" und "f" sind eine leere Liste bzw. noch ohne Wert. */
let liste = [];
var f;
/* Wenn der Wert des Eingabefeldes ans1 geändert wird, führe einen
bestimmten Code aus: */
input.addEventListener("change", e=>{
/* Die Variable "value" ist der Wert des Eingabefeldes nach der Änderung. */
let value = input.value;
/* Es wird versucht, den Wert des Eingabefeldes in eine JS-Funktion
zu übersetzen, die bisherige Funktion im Board zu entfernen und die neue
Funktion zu plotten. */
try {
f = board.jc.snippet(value, true, 'x', true);
liste.forEach(obj=>{
board.removeObject(obj);
});
liste = [];
liste.push(board.create('functiongraph', [f]));
} catch{
/* Wenn der Wert des Eingabefeldes nicht in eine JS-Funktion übersetzt
werden kann, dann führt JS diesen Code hier aus. Hier steht aber
nichts, da JS in diesem Fall nichts tun soll. */
};
});
});
});
Die Grafik:
[[jsxgraph width="70%" aspect-ratio="1/1"]] const board = JXG.JSXGraph.initBoard(divid, { boundingbox:[-10,10,10,-10], axis:true, showCopyright:false }); /* Wenn die Seite komplett geladen ist soll ein bestimmter Code ausgeführt werden: */ document.addEventListener("DOMContentLoaded", e=>{ /* Im Folgenden werden Funktionen aus der STACK-eigenen Bibliothek STACK-JS genutzt. Die Funktion bittet STACK um Zugriff auf das Eingabefeld ans1. */ var promiseforaninput = stack_js.request_access_to_input("ans1", true); /* Wenn der Zugriff gewährt wird, soll ein bestimmter Code ausgeführt werden: */ promiseforaninput.then((id) => { /* "input" ist das Eingabefeld. */ let input = document.getElementById(id); /* Die Variablen "liste" und "f" sind eine leere Liste bzw. noch ohne Wert. */ let liste = []; var f; /* Wenn der Wert des Eingabefeldes ans1 geändert wird, führe einen bestimmten Code aus: */ input.addEventListener("change", e=>{ /* Die Variable "value" ist der Wert des Eingabefeldes nach der Änderung. */ let value = input.value; /* Es wird versucht, den Wert des Eingabefeldes in eine JS-Funktion zu übersetzen, die bisherige Funktion im Board zu entfernen und die neue Funktion zu plotten. */ try { f = board.jc.snippet(value, true, 'x', true); liste.forEach(obj=>{ board.removeObject(obj); }); liste = []; liste.push(board.create('functiongraph', [f])); } catch{ /* Wenn der Wert des Eingabefeldes nicht in eine JS-Funktion übersetzt werden kann, dann führt JS diesen Code hier aus. Hier steht aber nichts, da JS in diesem Fall nichts tun soll. */ }; }); }); }); [[/jsxgraph]]\(f(x)=\) [[input:ans1]] [[validation:ans1]]
]]>Der Code:
[[iframe width="100%" height="100%"]] [[style href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/vs2015.css" /]] [[script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js" /]] [[script]] document.addEventListener("DOMContentLoaded", e=>{ hljs.highlightAll() }); [[/script]]
/*
This JSXGraph code is based on an example by The Center of Mobile Learning with
Digital Technology which is licensed under a Creative Commons Attribution ShareAlike
4.0 International License. https://creativecommons.org/licenses/by-sa/4.0/
*/
const board = JXG.JSXGraph.initBoard(divid, {
boundingbox: [-5, 6, 5, -4],
axis: false, // Turn off default axes
showCopyright:false
});
/* === Horizontale Achse mit linearer Skalierung und gleichem Aussehen wie die
Standardachse === */
/* Dictionary mit allen Attributen der Standard-Achsen: */
var attr = JXG.Options.board.defaultAxes.x;
/* Verhindern, dass bei der horitonalen Achse die 0 angezeigt/beschriftet wird */
attr.ticks.drawZero = false;
/* Erstelle neue horizontale Achse mit diesen Attributen: */
var xAxis = board.create('axis', [[0, 0], [1, 0]], attr);
/* === Vertikale Achse mit logarithmischer Skalierung und gleichem Aussehen wie
die Standardachse === */
/* Auch hier wird wieder eine Standard-Liste mit Attributen genommen und leicht
abgeändert: */
attr = JXG.Options.axis;
attr.fixed = true;
/* Erstelle neue vertikale Achse mit diesen Attributen: */
var yAxis = board.create('line', [[0, 0], [0, 1]], attr);
/* === Ticks für die logariothmische vertikale Achse erstellen: === */
/* Auch hier wird wieder eine Standard-Liste mit Attributen genommen und leicht
abgeändert: */
attr = JXG.Options.board.defaultAxes.y.ticks,
attr.insertTicks = true;
attr.drawLabels = true;
attr.drawZero = false;
attr.generateLabelText = function(tick, zero) {
var value = Math.pow(10, Math.round(tick.usrCoords[2] - zero.usrCoords[2]));
return this.formatLabelText(value);
};
/* Erstellen der Ticks: */
var ticksY = board.create('ticks', [yAxis, 1], attr);
/* === Zwei Funktionen auf der logarithmischen Skala plotten: === */
/* Folgende Funktion muss auf die zu plottenden Funktionen f1 und f2 angewendet
werden */
var post = (x) => JXG.Math.log10(x);
/* Die zu plottenden Funktionen: */
var f1 = (x) => x * x;
var f2 = (x) => Math.exp(x);
/* Graphen der Funktionen: */
board.create('functiongraph', [(x) => post(f1(x))], {
name: 'x^2',
withLabel: true
});
board.create('functiongraph', [(x) => post(f2(x))], {
name: 'e^x',
withLabel: true,
strokeColor: 'red'
});
Die Grafik:
[[jsxgraph width="70%" aspect-ratio="1/1"]] /* This JSXGraph code is based on an example by The Center of Mobile Learning with Digital Technology which is licensed under a Creative Commons Attribution ShareAlike 4.0 International License. https://creativecommons.org/licenses/by-sa/4.0/ */ const board = JXG.JSXGraph.initBoard(divid, { boundingbox: [-5, 6, 5, -4], axis: false, // Turn off default axes showCopyright: false }); /* === Horizontale Achse mit linearer Skalierung und gleichem Aussehen wie die Standardachse === */ /* Dictionary mit allen Attributen der Standard-Achsen: */ var attr = JXG.Options.board.defaultAxes.x; /* Verhindern, dass bei der horitonalen Achse die 0 angezeigt/beschriftet wird */ attr.ticks.drawZero = false; /* Erstelle neue horizontale Achse mit diesen Attributen: */ var xAxis = board.create('axis', [[0, 0], [1, 0]], attr); /* === Vertikale Achse mit logarithmischer Skalierung und gleichem Aussehen wie die Standardachse === */ /* Auch hier wird wieder eine Standard-Liste mit Attributen genommen und leicht abgeändert: */ attr = JXG.Options.axis; attr.fixed = true; /* Erstelle neue vertikale Achse mit diesen Attributen: */ var yAxis = board.create('line', [[0, 0], [0, 1]], attr); /* === Ticks für die logariothmische vertikale Achse erstellen: === */ /* Auch hier wird wieder eine Standard-Liste mit Attributen genommen und leicht abgeändert: */ attr = JXG.Options.board.defaultAxes.y.ticks, attr.insertTicks = true; attr.drawLabels = true; attr.drawZero = false; attr.generateLabelText = function(tick, zero) { var value = Math.pow(10, Math.round(tick.usrCoords[2] - zero.usrCoords[2])); return this.formatLabelText(value); }; /* Erstellen der Ticks: */ var ticksY = board.create('ticks', [yAxis, 1], attr); /* === Zwei Funktionen auf der logarithmischen Skala plotten: === */ /* Folgende Funktion muss auf die zu plottenden Funktionen f1 und f2 angewendet werden */ var post = (x) => JXG.Math.log10(x); /* Die zu plottenden Funktionen: */ var f1 = (x) => x * x; var f2 = (x) => Math.exp(x); /* Graphen der Funktionen: */ board.create('functiongraph', [(x) => post(f1(x))], { name: 'x^2', withLabel: true }); board.create('functiongraph', [(x) => post(f2(x))], { name: 'e^x', withLabel: true, strokeColor: 'red' }); [[/jsxgraph]]Geben Sie nun selbst eine Funktion ein. Im Feedback wird sie auf eine logarithmische Skala geplottet:
\(f(x)=\) [[input:ans1]] [[validation:ans1]]
[[feedback:prt1]]]]>Verschieben Sie die drei roten Punkte so, dass \(\int_{x_1}^{x_2}f(x)\,dx + \int_{x_2}^{x_3}f(x)\,dx < 0\) gilt.
[[jsxgraph input-ref-ans1="ans1ref"]] JXG.Options.text.useMathJax = true; const board = JXG.JSXGraph.initBoard(divid, { axis: true, boundingbox: [-5,5,5,-5], showCopyright: false, showNavigation: false, pan: { enabled: false }, zoom: { enabled: false }, }); const opts = { withLabel:true, snapToGrid:true, snapSizeX:0.1 }; function make_names(){ let tmp = points.sort((p1,p2)=>p1.X()-p2.X()); tmp[0].setAttribute({name:"P1"}); tmp[1].setAttribute({name:"P2"}); tmp[2].setAttribute({name:"P3"}); }; var points = [ board.create('glider',[-3,0,board.defaultAxes.x],opts), board.create('glider',[1,0,board.defaultAxes.x],opts), board.create('glider',[2.5,0,board.defaultAxes.x],opts) ]; make_names(); for(let p of points){ p.on("drag",(e,i)=>make_names()) }; function f(x){ return 1/3*(x-points[0].X())*(x-points[1].X())*(x-points[2].X()) }; const graph = board.create('functiongraph',[f]); var int1 = board.create('integral',[[ function(){return points[0].X()}, function(){return points[1].X()} ],graph],{ withLabel:false, highlight:false, fillColor:"plum" }); var int2 = board.create('integral',[[ function(){return points[1].X()}, function(){return points[2].X()} ],graph],{ withLabel:false, highlight:false, fillColor:"lightgreen" }); stack_jxg.bind_list_of(ans1ref, points); [[/jsxgraph]] [[feedback:prt1]]]]>Antwort: \(f(x)=\) [[input:ans1]] [[validation:ans1]]
[[feedback:prt1]]]]>Die folgende Grafik veranschaulicht das Problem:
[[jsxgraph]] const board = JXG.JSXGraph.initBoard(divid, { axis: true, boundingbox: [-5, 5, 5, -5], showCopyright: false, showNavigation: false, pan: { enabled: false }, zoom: { enabled: false }, }); /* Funktion f: */ var f = board.jc.snippet('{#fx#}', true, 'x', true); /* Graph der Funktion f: */ var graph_f = board.create("functiongraph", [f],{ strokeColor:'blue', fixed:true }); /* Funktion g: */ var g = board.jc.snippet('{#gx#}', true, 'x', true); /* Graph der Funktion g: */ var graph_g = board.create("functiongraph", [g],{ strokeColor:'green', fixed:true }); /* "Ungleichheit", auf deren Basis die Fläche zwischen den Funktionsgraphen eingefärbt wird: */ var ineq = board.create('inequality', [graph_f, graph_g],{ visible:false }); /* Fläche zwischen den Funktionen, nämlich der Schnitt zwischen dem GFraphen von g und der o.g. "Ungleichheit": */ var clip = board.create('curveintersection', [ineq, graph_g], { fillColor: 'deeppink', fillOpacity: 0.2 }); [[/jsxgraph]]Antwort: Die Flächengröße beträgt [[input:ans1]] Flächeneinheiten. [[validation:ans1]]
[[feedback:prt1]]]]>Die folgenden Aufgaben sind nur zur Demonstration technischer Möglichkeiten und nicht für den Einsatz in der Lehre gedeacht. Sie enthalten jeweils einen Code-Block, aus dem Sie den Quellcode der Applikationen kopieren können.
]]>Eine Klimastation führt eine Statistik über die Jahresmitteltemperatur der Stadt. Die Jahresmitteltemperatur in den Jahren {#Jahre[1]#} bis {#Jahre[10]#} ist wie folgt verteilt:
| Jahr | {#Jahre[1]#} | {#Jahre[2]#} | {#Jahre[3]#} | {#Jahre[4]#} | {#Jahre[5]#} | {#Jahre[6]#} | {#Jahre[7]#} | {#Jahre[8]#} | {#Jahre[9]#} | {#Jahre[10]#} |
|---|---|---|---|---|---|---|---|---|---|---|
| Temperatur [°C] | {#a1#} | {#a2#} | {#a3#} | {#a4#} | {#a5#} | {#a6#} | {#a7#} | {#a8#} | {#a9#} | {#a10#} |
Zeichnen Sie die empirische Verteilungsfunktion dieser Datenpunkte, indem Sie an den Sprungstellen der Funktion per Mausklick Punkte zum Koordinatensystem hinzufügen. Sie können einen bereits hinzugefügten Punkt entfernen, indem Sie auf ihn klicken.
[[jsxgraph input-ref-jsxvar="jsxvarRef"]] [[style]] .jxgbox { border-style:none; background: none; } [[/style]] Array.prototype.remove = function ( index ) { return this.filter(item => item !== value); }; Array.prototype.insert = function ( index, item ) { this.splice( index, 0, item ); }; Array.prototype.insertPos = function ( item ) { let pos=this.findIndex(function(number) { return number > item; }); if(pos>-1) return pos; else return this.length; }; JXG.Options.point.snapToGrid = true; JXG.Options.point.snapSizeX = 0.1; JXG.Options.point.snapSizeY = 0.1; JXG.Options.point.withLabel = false; const board = JXG.JSXGraph.initBoard(divid, { showCopyright: false, boundingbox: [7.5,1.09,11,-0.1], axis: true, showNavigation:false, pan:{enabled:false}, zoom:{enabled:false} }); board.defaultAxes.y.setAttribute({visible:'false'}); board.defaultAxes.x.setAttribute({visible:'false'}); var newXAxis = board.create('axis',[[0,0],[1,0]],{ ticks:{ drawZero:true, label: {offset: [0,-3], anchorX: 'middle', anchorY: 'top'} } }); var newYAxis = board.create('axis',[[8,0],[8,1]],{ ticks:{ label: {offset: [-3,0], anchorX: 'right', anchorY: 'middle'} } }); function unpack_input(value){ var liste = []; var tmp = JSON.parse(value); var num_points = tmp.length; for (let i=0; i < num_points; i++) { let p_temp = [tmp[i].x, tmp[i].y]; liste.push(p_temp); }; return liste; }; var linienende = 1000; var jsxvar_inputfield = document.getElementById(jsxvarRef); var listeP = []; var liste_temp = (jsxvar_inputfield.value == "") ? [] : unpack_input(jsxvar_inputfield.value); var listeX = (jsxvar_inputfield.value == "") ? [-1000.1] : liste_temp.map((point)=>point[0]); var listeY = (jsxvar_inputfield.value == "") ? [0] : liste_temp.map((point)=>point[1]); var listeS = []; for (let i=0;iHerzlichen Glückwunsch, Sie sind am Ende der Aufgabe angelangt! Sie sollten nun eine empirische Verteilungsfunktion aus einem gegebenen Datensatz zeichnen können.
]]>Wenn Sie {@string_punkte_ueberfluessig@} {@sequenceify(ueberfluessige_Punkte)@} weglassen, ändert sich die Funktion nicht. In der folgenden Grafik sind diese Punkte mit einer schwarzen Box umrandet.
[[jsxgraph]] [[style]] .jxgbox { border-style:none; background: none; } [[/style]] JXG.Options.point.withLabel = false; const board = JXG.JSXGraph.initBoard(divid, { showCopyright: false, boundingbox: [7.5,1.09,11,-0.1], axis: true, showNavigation:false, pan:{enabled:false}, zoom:{enabled:false} }); board.defaultAxes.y.setAttribute({visible:'false'}); board.defaultAxes.x.setAttribute({visible:'false'}); var newXAxis = board.create('axis',[[0,0],[1,0]],{ ticks:{ drawZero:true, label: {offset: [0,-3], anchorX: 'middle', anchorY: 'top'} } }); var newYAxis = board.create('axis',[[8,0],[8,1]],{ ticks:{ label: {offset: [-3,0], anchorX: 'right', anchorY: 'middle'} } }); var ans = {#empVert#}; var ueberfluessig = {#ueberfluessige_Punkte#}; var punkte = []; var ueberfluessige_punkte = []; var strecken = []; //Punkte hinzufügen: for(let p of ans){ punkte.push( board.create('point',p,{ fixed:true, highlight:false }) ); }; strecken.push( board.create('segment',[ [-1000,0], [punkte[0].X(), 0] ],{ fixed:true, highlight:false }) ); for(let i=1; iZudem erfüllt sie nicht die Eigenschaft, dass sie für \(x\rightarrow\infty\) den Wert 1 annimmt. Eine empirische Verteilungsfunktion muss sich im Limes aber immer 1 annähern.
[[/ if ]]]]>Allerdings gibt es mindestens einen Datenwert, für den Sie einen solchen Punkt nicht eingezeichnet haben.
In der folgenden Grafik sehen Sie noch einmal Ihre empirische Verteilungsfunktion.
Die x-Stellen, an denen ein Datenwert liegt, Sie aber keinen Punkt gezeichnet haben, sind durch gestrichelte vertikale Linien markiert.
In der folgenden Grafik sehen Sie noch einmal Ihre empirische Verteilungsfunktion.
Die Punkte, die an x-Stellen liegen, die keinem Datenwert entsprechen, sind mit einer schwarzen Box umrandet.
Kann es sein, dass Sie als y-Koordinaten die relative Häufigkeit des jeweilgen Datenwertes verwendet haben? Bei einer empirischen Verteilungsfunktion müssen allerdings die kumulierten relativen Häufigkeiten verwendet werden, d. h. die Summe der relativen Häufigkeiten aller Werte, die kleiner als der betrachtete Wert oder gleich ihm sind.
In der folgenden Grafik sehen Sie noch einmal Ihre empirische Verteilungsfunktion. Die Punkte, die an einem korrekten Datenwert liegen, aber einen falschen y-Wert haben, sind schwarz umkreist.
[[jsxgraph]] [[style]] .jxgbox { border-style:none; background: none; } [[/style]] JXG.Options.point.withLabel = false; const board = JXG.JSXGraph.initBoard(divid, { showCopyright: false, boundingbox: [7.5,1.09,11,-0.1], axis: true, showNavigation:false, pan:{enabled:false}, zoom:{enabled:false} }); board.defaultAxes.y.setAttribute({visible:'false'}); board.defaultAxes.x.setAttribute({visible:'false'}); var newXAxis = board.create('axis',[[0,0],[1,0]],{ ticks:{ drawZero:true, label: {offset: [0,-3], anchorX: 'middle', anchorY: 'top'} } }); var newYAxis = board.create('axis',[[8,0],[8,1]],{ ticks:{ label: {offset: [-3,0], anchorX: 'right', anchorY: 'middle'} } }); var ans = {#SAns#}; var punkte = []; var strecken = []; //Punkte hinzufügen: for(let p of ans){ punkte.push( board.create('point',p,{ fixed:true, highlight:false }) ); }; strecken.push( board.create('segment',[ [-1000,0], [punkte[0].X(), 0] ],{ fixed:true, highlight:false }) ); for(let i=1; iIn der folgenden Grafik sehen Sie noch einmal Ihre empirische Verteilungsfunktion. Die Punkte, die an einem korrekten Datenwert liegen, aber einen falschen y-Wert haben, sind schwarz umkreist.
[[jsxgraph]] [[style]] .jxgbox { border-style:none; background: none; } [[/style]] JXG.Options.point.withLabel = false; const board = JXG.JSXGraph.initBoard(divid, { showCopyright: false, boundingbox: [7.5,1.09,11,-0.1], axis: true, showNavigation:false, pan:{enabled:false}, zoom:{enabled:false} }); board.defaultAxes.y.setAttribute({visible:'false'}); board.defaultAxes.x.setAttribute({visible:'false'}); var newXAxis = board.create('axis',[[0,0],[1,0]],{ ticks:{ drawZero:true, label: {offset: [0,-3], anchorX: 'middle', anchorY: 'top'} } }); var newYAxis = board.create('axis',[[8,0],[8,1]],{ ticks:{ label: {offset: [-3,0], anchorX: 'right', anchorY: 'middle'} } }); var ans = {#SAns#}; var punkte = []; var strecken = []; //Punkte hinzufügen: for(let p of ans){ punkte.push( board.create('point',p,{ fixed:true, highlight:false }) ); }; strecken.push( board.create('segment',[ [-1000,0], [punkte[0].X(), 0] ],{ fixed:true, highlight:false }) ); for(let i=1; iVerschieben Sie die drei roten Punkte so, dass \(\int_{x_1}^{x_2}f(x)\,dx + \int_{x_2}^{x_3}f(x)\,dx < 0\) gilt.
[[jsxgraph input-ref-ans1="ans1ref"]] JXG.Options.text.useMathJax = true; const board = JXG.JSXGraph.initBoard(divid, { axis: true, boundingbox: [-5,5,5,-5], showCopyright: false, showNavigation: false, pan: { enabled: false }, zoom: { enabled: false }, }); const opts = { withLabel:true, snapToGrid:true, snapSizeX:0.1 }; function make_names(){ let tmp = points.sort((p1,p2)=>p1.X()-p2.X()); tmp[0].setAttribute({name:"P1"}); tmp[1].setAttribute({name:"P2"}); tmp[2].setAttribute({name:"P3"}); }; var points = [ board.create('glider',[-3,0,board.defaultAxes.x],opts), board.create('glider',[1,0,board.defaultAxes.x],opts), board.create('glider',[2.5,0,board.defaultAxes.x],opts) ]; make_names(); for(let p of points){ p.on("drag",(e,i)=>make_names()) }; function f(x){ return 1/3*(x-points[0].X())*(x-points[1].X())*(x-points[2].X()) }; const graph = board.create('functiongraph',[f]); var int1 = board.create('integral',[[ function(){return points[0].X()}, function(){return points[1].X()} ],graph],{ withLabel:false, highlight:false, fillColor:"plum" }); var int2 = board.create('integral',[[ function(){return points[1].X()}, function(){return points[2].X()} ],graph],{ withLabel:false, highlight:false, fillColor:"lightgreen" }); stack_jxg.bind_list_of(ans1ref, points); [[/jsxgraph]] [[feedback:prt1]]]]>