Difference between revisions of "QFunction"

Revision as of 12:21, 26 January 2018

Guestion Box Function

Nutze diese Funktion um einen Text / eine Frage anzuzeigen. Der Text kann maximal aus drei Zeilen bestehen.

// 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);
  noStroke();
  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);
  }

}

Check-Box Function

Nutze diese Funktion um eine Antwort Checkbox anzuzeigen. Der Text kann maximal aus zwei Zeilen bestehen.

// x-Position, y-Position, Checkbox-Number, Text-1-Line, Text-3-Line
function cBox(cX, cY, cN, cT1, cT2){
  if( (mouseIsPressed)&&(mouseUp == 0) ){
    if( (mouseX>cX-150)&&(mouseX<cX+150)&&(mouseY>cY)&&(mouseY<cY+40) ){ 
      mouseUp = 1;
      if(cList[cN] == 0){
        cList[cN] = 1;
      }else{
        cList[cN] = 0;
      }
    }
  }


  if(mouseIsPressed == false){
    mouseUp = 0;
  }

  // Text
  fill(250);
  noStroke();
  rect(cX - 150, cY, 300, 40);
  fill(10);
  textAlign(LEFT);
  textSize(18);

  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[cN] == 1){
    fill(20);
    ellipse(cX - 130, cY+20, 15, 15);
  }
}

Beispiel Code

Hier eine Umfrage mit drei Fragen. MOMENTAN NOCH WORK IN PROGRESS

var frame = 0;
var frameSetup = 0;

var bgc = 50;
var mouseT = 0;
var w = 384;
var h = 640;

var cList = [0,0,0, 0,0,0,0, 0,0,0,0];
var mouseUp = 0;

function setup() {
  pixelDensity(1);

  createCanvas(384, 640);

}

// x-Position, y-Position, Checkbox-Number, Text-1-Line, Text-3-Line
function cBox(cX, cY, cN, cT1, cT2){
  if( (mouseIsPressed)&&(mouseUp == 0) ){
    if( (mouseX>cX-150)&&(mouseX<cX+150)&&(mouseY>cY)&&(mouseY<cY+40) ){ 
      mouseUp = 1;
      if(cList[cN] == 0){
        cList[cN] = 1;
      }else{
        cList[cN] = 0;
      }
    }
  }


  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[cN] == 1){
    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);
  }

}


function draw() {
  if( fullscreen() ){
    if(frame == 0){
      frame = 1;
    }
  }
  background(bgc);

  // Frame Conter Display
  textSize(18);
  text(frame, 10, 20);
  
  fill(200);
  rect(0, height - 150, width, 150);

  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, "Wegen des Wetters mage ich ", "an heute ein tristes Grau.");
    cBox(width/2, 200, 2, "Meine liblingsfabe ist Blau.", "");
    cBox(width/2, 250, 3, "Ich mage heute Rot!", "");
  }

  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, 4, "Ganz ok", "");
    cBox(width/2, 200, 5, "Super!", "");
    cBox(width/2, 250, 6, "So mittel...", "");
    cBox(width/2, 300, 7, "Mir geht es heute nicht", "so gut.");
  }

  if (frame == 3) {
    if (frameSetup == 0) {
      frameSetup = 1;
      bgc = 100;
    }
    qBox(width/2, 30, 3, "Hast Du gut geschlafen?", "", "");
    cBox(width/2, 150, 8, "Ja", "");
    cBox(width/2, 200, 9, "Nein", "");
    cBox(width/2, 250, 10, "Ich konnte nicht schlafen", "");
    cBox(width/2, 300, 11, "Ich habe mich gut ", "ausgeschlafen");
  }

  if (frame == 4) {
    if (frameSetup == 0) {
      frameSetup = 1;
      bgc = 100;
    }
    text("Answer_A_1: " + Answer_A_1, w / 2, h / 2);
  }

  if (frame == 0) {
    background(bgc);
    textAlign(CENTER);
    textSize(40);
    text("Start-Screen", w / 2, h / 2);

  } else {
    nextButton();
  }
}

function nextButton() {
  textAlign(CENTER);
  textSize(40);
  fill(200);
  noStroke();
  // rect(0, height - 150, width, 150);
  fill(0);
  text("NEXT", w / 2, h - 75);
}

function mousePressed() {

  if (millis() > mouseT + 1000) {
    mouseT = millis();
    if ((mouseY >= height - 150) && (frame > 0) && (frame <= 3)) {
      mouseT = millis();
      frame = frame + 1;
      frameSetup = 0;
    }
  
  }
    if (frame == 0) {
      fullscreen(true);
    }
    
}