6,211
edits
Changes
→Beispiel Code
== Guestion Box Einführung == Kopiere die beiden Funktionen qBox und cBox unten zu deinem Projekt hinzu (copy paste text) und verwend sie dann um Fragen und Antworten zu generieren. <br> == qBox Function ==
Nutze diese Funktion um einen Text / eine Frage anzuzeigen. Der Text kann maximal aus drei Zeilen bestehen.
text(qT2, qX - 145, qY + 42);
text(qT3, qX - 145, qY + 64);
}
// Evaluation
qList[qN-1] = 0;
for(var f=0; f<=cList.length; f++){
if(cList[qN-1][f] != undefined){
qList[qN-1] = qList[qN-1] + cList[qN-1][f];
}
}
<br>
== Check-Box cBox Function ==
Nutze diese Funktion um eine Antwort '''Checkbox ''' anzuzeigen. Der Text kann maximal aus zwei Zeilen bestehen.
<pre>
// x-Position, y-Position, Qusetion-Nr, Checkbox-Number, Answer-Value, Text-1-Line, Text-3-Linefunction cBox(cX, cY, qN, cN, cA, cT1, cT2){
if( (mouseIsPressed)&&(mouseUp == 0) ){
if( (mouseX>cX-150)&&(mouseX<cX+150)&&(mouseY>cY)&&(mouseY<cY+40) ){
mouseUp = 1;
if(cList[qN-1][cN-1] == 0undefined){ cList[qN-1][cN-1] = 1cA;
}else{
cList[qN-1][cN-1] = 0undefined;
}
}
}
if(mouseIsPressed == false){
mouseUp = 0;
}
// Text
fill(250);
noStroke();
rect(cX - 150, cY, 300, 40);
fill(10);
textAlign(LEFT);
textSize(18);
textStyle(NORMAL);
if(cT2 == ""){
text(cT1, cX - 110, cY + 25);
}else{
text(cT1, cX - 110, cY + 15);
text(cT2, cX - 110, cY + 34);
}
// Checkbox
ellipseMode(CENTER);
stroke(20);
strokeWeight(2);
noFill();
ellipse(cX - 130, cY+20, 25, 25);
if(cList[qN-1][cN-1] != undefined){
fill(20);
ellipse(cX - 130, cY+20, 15, 15);
}
}
</pre>
<br>
== qButton Funktion ==
<pre>
// Question-Number, Minimum-Selection
function qButton(qN, qType){
if( (mouseIsPressed)&&(mouseUp == 0) ){
mouseUp = 1;
if ((mouseY >= height - 150) && (frame > 0) && (frame <= 3)) {
var count = 0;
for(var f=0; f<=cList.length; f++){
if(cList[qN-1][f] != undefined){
count = count + 1;
}
}
if(count > qType - 1){
frame = frame + 1;
frameSetup = 0;
}
}
}
fill(200);
rect(10, height - 150, width-20, 150-10, 20);
textAlign(CENTER);
textSize(40);
fill(200);
noStroke();
fill(0);
text("NEXT", width / 2, height - 75);
}
</pre>
<br>
== Beispiel Code ==
Hier eine Umfrage mit drei Fragen. MOMENTAN NOCH WORK IN PROGRESS
<pre>
var frame = 0;
var frameSetup = 0;
var bgc = 50; // backGroundColor
var mouseT = 0; // mouseTimeer
var cList = [ [undefined,undefined,undefined], [undefined,undefined,undefined,undefined], [undefined,undefined,undefined,undefined] ]; // Checkbox-List - one can pre select here
var qList = [0, 0, 0]; // Guestion-Vale-List
var mouseUp = 0;
function setup() {
pixelDensity(1);
createCanvas(384, 640);
}
function draw() {
if( fullscreen() ){
if(frame == 0){
frame = 1;
}
}
background(bgc);
// Frame Conter Display
textSize(18);
text(frame, 10, 20);
textAlign(RIGHT);
text(cList, width - 10, 20);
text(qList, 150, 20);
if (frame == 1) {
if (frameSetup == 0) {
frameSetup = 1;
bgc = 100;
}
qBox(width/2, 30, 1, "Hallo was ist deine ganz", "persoehnliche Lieblingsfarbe", "an diesem Tag?");
cBox(width/2, 150, 1, 1, -2, "Wegen des Wetters mage ich ", "an heute ein tristes Grau.");
cBox(width/2, 200, 1, 2, 1, "Meine liblingsfabe ist Blau.", "");
cBox(width/2, 250, 1, 3, 3, "Ich mage heute Rot!", "");
qButton(1, 1);
}
if (frame == 2) {
if (frameSetup == 0) {
frameSetup = 1;
bgc = 120;
}
qBox(width/2, 30, 2, "Wie wuerdest Du deine Tages-", "Stimmung bezeichnen?", "");
cBox(width/2, 150, 2, 1, 1, "Ganz ok", "");
cBox(width/2, 200, 2, 2, 3, "Super!", "");
cBox(width/2, 250, 2, 3, 0, "So mittel...", "");
cBox(width/2, 300, 2, 4, -2, "Mir geht es heute nicht", "so gut.");
qButton(2, 1);
}
if (frame == 3) {
if (frameSetup == 0) {
frameSetup = 1;
bgc = 100;
}
qBox(width/2, 30, 3, "Hast Du gut geschlafen?", "", "");
cBox(width/2, 150, 3, 1, 2, "Ja", "");
cBox(width/2, 200, 3, 2, -2, "Nein", "");
cBox(width/2, 250, 3, 3, -3, "Ich konnte nicht schlafen", "");
cBox(width/2, 300, 3, 4, 3, "Ich habe mich gut ", "ausgeschlafen");
qButton(3, 1);
}
if (frame == 4) {
if (frameSetup == 0) {
frameSetup = 1;
bgc = 100;
}
textAlign(CENTER);
text("Emotionswert Frabe: " + qList[0], width / 2, 150);
text("Emotionswert Tagesstimmung: " + qList[1], width / 2, 200);
text("Emotionswert Schlaf: " + qList[2], width / 2, 250);
}
if (frame == 0) {
background(bgc);
textAlign(CENTER);
textSize(40);
text("Start-Screen", width / 2, height / 2);
} else {
// qButton(1, 1);
}
}
// x-Position, y-Position, Qusetion-Nr, Checkbox-Number, Answer-Value,Text-1-Line, Text-3-Line
function cBox(cX, cY, qN, cN, cA, cT1, cT2){
if( (mouseIsPressed)&&(mouseUp == 0) ){
if( (mouseX>cX-150)&&(mouseX<cX+150)&&(mouseY>cY)&&(mouseY<cY+40) ){
mouseUp = 1;
if(cList[qN-1][cN-1] == undefined){
cList[qN-1][cN-1] = cA;
}else{
cList[qN-1][cN-1] = undefined;
}
}
}
if(mouseIsPressed == false){
// Text
fill(250);
noStroke();
rect(cX - 150, cY, 300, 40);
fill(10);
textAlign(LEFT);
textSize(18);
textStyle(NORMAL);
if(cT2 == ""){
noFill();
ellipse(cX - 130, cY+20, 25, 25);
if(cList[qN-1][cN-1] !== 1undefined){
fill(20);
ellipse(cX - 130, cY+20, 15, 15);
}
}
// x-Position, y-Position, Guestion-Number, Text-1-Line, Text-3-Line, Text-3-Line
function qBox(qX, qY, qN, qT1, qT2, qT3){
// Text
fill(250);
rect(qX - 150, qY, 300, 70);
fill(10);
textAlign(LEFT);
textSize(20);
if( (qT2 == "")&&(qT3 == "") ){
text(qT1, qX - 145, qY + 20);
}
if( (qT2 != "")&&(qT3 == "") ){
text(qT1, qX - 145, qY + 20);
text(qT2, qX - 145, qY + 42);
}
if( (qT2 != "")&&(qT3 != "") ){
text(qT1, qX - 145, qY + 20);
text(qT2, qX - 145, qY + 42);
text(qT3, qX - 145, qY + 64);
}
// Evaluation
qList[qN-1] = 0;
for(var f=0; f<=cList.length; f++){
if(cList[qN-1][f] != undefined){
qList[qN-1] = qList[qN-1] + cList[qN-1][f];
}
}
}
// Guestion-Number, Minimum-Selection
function qButton(qN, qType){
if( (mouseIsPressed)&&(mouseUp == 0) ){
mouseUp = 1;
if ((mouseY >= height - 150) && (frame > 0) && (frame <= 3)) {
var count = 0;
for(var f=0; f<=cList.length; f++){
if(cList[qN-1][f] != undefined){
count = count + 1;
}
}
if(count > qType - 1){
frame = frame + 1;
frameSetup = 0;
}
}
}
fill(200);
rect(10, height - 150, width-20, 150-10, 20);
textAlign(CENTER);
textSize(40);
fill(200);
noStroke();
fill(0);
text("NEXT", width / 2, height - 75);
}
function mousePressed() {
if (frame == 0) {
fullscreen(1);
}
}
