Wie Umfrage und einzelne Listeninhalte programmieren?

4 Antworten

Ich muss zugeben, dass ich nicht ganz verstehe was Du tun willst.

Aber schau Dir mal https://pollunit.com an. Da kann man auch Umfragen über Bilder anlegen, kann Links hinzufügen und aus verschiedenen Designs wählen und so der ganzen Seite einen eigenen Look geben.

Man kann auch eigene Themes anlegen, dazu braucht man aber einen Premium Account.

Vielleicht sparst Du Dir so paar Wochen Arbeit ;P

Mit SurveyMonkey lässt sich so etwas wirklich nicht umsetzen? Und wie wäre es mit anderen Diensten wie Google Formulare? An deiner Stelle würde ich wirklich nach alternativen Wegen suchen, statt nun zu versuchen, etwas auf die Schnelle zusammenzubasteln, wofür du wohl kaum Zeit und genügend Kenntnisse hast.

Nun zu deinem Code:

  • Der title-Tag fehlt im head.
  • Der style-Tag gehört in den head.
  • Bei der Schriftart werden nur Schriftnamen via Anführungszeichen gruppiert, in deren Namen Leerzeichen stehen. Die Auflistung mehrerer Schriftarten wird nicht gruppiert.
  • Der script-Tag gehört in den head oder in den body. Ich würde ihn vor das schließende body-Tag setzen, da dann garantiert ist, dass die Elemente zuvor bereits geladen wurden.
  • Tue dir selbst den Gefallen und gib Funktionen, Variablen, etc. einen aussagekräftigen, eindeutigen Namen. Mit f kann niemand etwas anfangen.

Weiter schaue ich erst einmal nicht durch.

Wie kann ich den Inhalt der einzelnen "Frage" Seiten verändern?

Lege dir am besten ein JSON-Objekt an, indem je Frage alle Informationen in einzelnen Properties stehen.

Beispiel:

[{
  "question": "some question",
  "answerImageUrls": [ "...", "...", /* ... */ ]
},
{
  "question": "some other question",
  "answerImageUrls": [ "...", "...", /* ... */ ]
},
/* ... */
}]

Wenn jemand auf den Button für Weiter/Zurück klickt, brauchst du nur den aktuellen Index wissen und kannst so die aktuelle Frage ermitteln:

var questionData = jsonObject[currentPage];
var question = questionData["question"];
// ...

Du könntest sogar CSS-Klassen darin speichern.

Kann die auf den "Frage" Seiten ausgegebene Liste 1-6 als 6 einzelne Hyperlinks funktionieren oder als Abfrage? Ich müsste ja wissen welcher der 6 Treffer in der Liste von den Probanden ausgewählt wurde.

Die Daten, die ein Nutzer ausgewählt hat, sollten irgendwo zwischengespeichert werden. Für den Moment entweder in Cookies / WebStorage oder - wo es am Ende eh hin muss, gleich an den Server.

Verwende Radiobuttons und ein HTML-Formular. Die Daten lassen sich ebenso über AJAX verschicken. Dann muss die Seite nicht neu geladen werden und du musst dir nicht ausdenken, wie du die aktuelle Seite für JS zwischenspeicherst.

Auf Serverseite müssen die Daten dann aufgefangen werden. Ein PHP-Skript ist wohl die schnellste Wahl, sofern es dein Webserver unterstützt. Die Daten können entweder via mail an dich verschickt oder in einer Datenbank gespeichert werden.

Einige Tutorials dazu findest du auf W3Schools.

Alternativ zu deiner JavaScript Pagination könntest du auch gleich mit Formularen und PHP arbeiten.

Exemplarisches Beispiel:

<?php $nextPageUrl = "?page=" . ($currentPage + 1); ?>
<form action="<?= $nextPageUrl ?>" method="post">
  <p><?= $question ?></p>
  <?php for ($i = 0; $i < count($questions); ++$i): ?>
    <input name="question<?= $currentPage ?>" type="radio" value="<?= $i ?>">
  <?php endfor; ?>
  <input name="currentPage" type="hidden" value="<?= $currentPage ?>">
  <button>Next</button>
</form>

In der URL wird dann die aktuelle Seite mitgereicht. Der Formularbutton leitet auf die nächste Seite.

Vielen Lieben Dank für Deine Antwort! Das ist wirklich super:)

Mit Unipark und anderen Tools haben ich und meine Gruppenmitglieder im Experiment die Randomisierung aller Ergebnisse leicht hin bekommen, aber leider nicht das je Art (Schwarz-weiß, bunt und ohne Emoji) jeweils 2 insgesamt aus den randomisierten Ergebnissen angezeigt wird. Wir versuchen das seit Freitag und dachten nun es wäre besser noch einen Programmierversuch nebenbei zu starten, da es langsam so aussieht als wäre das leider wirklich nicht umsetzbar sonst:/

Ich werde mich jetzt Stück für Stück mit Deiner Antwort beschäftigen und versuchen das umzusetzen.

Ich bin Dir super dankbar, dass Du dir so viel Zeit für die Antwort genommen hast! Das ist wahnsinnig nett und hilfreich:)

0
@TeresaJ89

Du wirst allerdings merken, dass ich stets nur Optionen angerissen habe und ihr euch noch mit so einigem beschäftigen müsst. Bei konkreten Fragen kannst du hier nochmals Kommentare anfügen.

1
@regex9

Danke für die Möglichkeit, ich werde sehr wahrscheinlich darauf zurückkommen:)

0
@TeresaJ89

Hallo,

Also für mich ist das leider alles noch viel zu kompliziert, ich denke da ich mich mit der ganzen Thematik nicht auskenne wird es für mich auch schwer bis morgen Abend da rein zu finden :/ Ich habe nun versucht das Problem zu umgehen, in dem ich ein einfaches html Formular mit multiple choice ans Ende setze und die Probanden dort eintragen lasse welches Ergebnis sie wählen. Leider weiß ich nun noch nicht wie ich auf jeder Seite oben ein anderes Bild einfügen kann.

Es tut mir Leid falls meine Fragen laienhaft und nicht so verständlich sind. Ich geb mir größte Mühe, komme aber tatsächlich mit dem ganzen Code gerade sehr schlecht zurecht :/

0
@TeresaJ89

Also ich müsste diesen Code:

<div> <img src="GoogleWiss2.JPG" alt="Einfluss von Hitze auf Herz- Kreislauferkrankungen" height="150" width="760"></div>

Zum Beispiel nur mit Seite 2 verbinden. Falls du mir da irgendwie weiter helfen kannst wäre ich wahnsinnig dankbar!!

0
@TeresaJ89

Ich habe einmal eine simple Navigation mit JS geschrieben: http://jsfiddle.net/aveu2o6b/1/

Das Formular leitet stets auf die selbe Seite, jedoch mit einer Information über die aktuelle Seitennummer (URL Parameter). Wenn der Parameter nicht gegeben ist, geht es zurück auf die erste Seite (bei mir startet die mit 0). Je nach Seitennummer wird auch das Bild gesetzt. Seite 1 hat das Bild image0.jpg, Seite 2 das Bild image1.jpg, usw. ... du müsstest deine Bilder genauso benennen.

Du könntest hier nun noch eine Maximalgrenze festlegen. Falls es bspw. nur 5 Seiten gibt:

if (!currentPage) {
  currentPage = 0;
}

if (4 == currentPage + 1) {
  document.forms[0].action = "result.php";
}

Das würde bedeuten, dass auf der letzten Seite das Formular darauf abgestimmt werden würde, folgend zu einer Datei result.php zu leiten, die das Gesamtergebnis ermittelt.

Es ist allerdings eine einfache, ganz-fix-Lösung.

0
@TeresaJ89

Ich schau nachher nochmal, ob ich Zeit habe. Wenn ja, bau ich vielleicht etwas Größeres mit PHP.

0
@regex9

Hallo, ich bekomme das leider immer noch nicht gut hin:/ Ich bin wahnsinnig dankbar für deine Hilfe! Ich bin seit heute morgen um 7 durchgehend am Computer und finde einfach keine Lösung. Ich habe jetzt unter einer der Antworten meinen aktuellen Stand hochgeladen. Ich habe nun versucht das fehlende Bild der Seite als 1 Teil der Liste einzufügen, das funktioniert auch, ist aber eine sehr unelegante Lösung, da dann alle Ergebnisse falsch nummeriert sind und das insgesamt ja eigentlich aussehen sollte wie eine google suche.

Und ich habe mir eine Domain gemietet über die ich vielleicht die Ergebnisse der Befragung versenden kann? Danke für deine Geduld und die Hilfe die du mir bisher schon gegeben hast!

0
@TeresaJ89

Um kurz die Anforderungen zusammenzufassen, nach denen ich entwickelt habe: Der Nutzer bekommt mehrere Seiten präsentiert, zwischen denen er via Buttons hin- und herspringen kann. Auf jeder Seite bekommt er Bilder angezeigt (6), herausgenommen aus 3 Kategorien stets je 2 Stück. Insgesamt sind diese stets zufällig gewählt und gemischt. Er kann nun jedesmal ein Bild auswählen und fortfahren. Die Auswahl von einem Bild ist Pflicht.

Die Daten werden am Ende gespeichert. Temporär werden sie in der Browser Session gesichert.

Ich hoffe mal, dass ich hier nun nichts vergessen habe, ich hatte insgesamt nicht viel Zeit dafür.

Den Inhalt der style.css poste ich hier:

span {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 20px;
}

ul {
  list-style-type: none;
}

img {
  width: 25%;
}      

Setup:

  • Ein Apache-Webserver ist notwendig. Du benötigst also einen Webspace, auf dem einer läuft. Da dies meist der Fall ist, sollte es da die wenigsten Probleme geben.
  • JavaScript darf im Browser nicht blockiert werden. Es wird benötigt, damit die selektierten Daten zwischengespeichert werden, wenn ein Nutzer eine Seite zurückgeht.
  • Wer an den URL-Parametern herumspielt, wird bestraft. Kurz: Alles was vor page=1 liegt, leitet auf Seite 1 und alles was auf eine Seite verweist, die nach der letzten liegt, gilt als beendete Tour. Ausnahme: Wenn vorherige Seiten noch nicht ausgefüllt wurden, springt die Tour an den Anfang. Der Nutzer muss auf jeder Seite ein Bild ausgewählt haben. Andernfalls kann er die Tour nicht abschließen.
  • Ordnerstruktur: Im Root-Verzeichnis liegen alle Dateien, sowie 3 Ordner für die Bilder (colorizedEmoticons, someImages, uncolorizedEmoticons). So hatte ich deine Kategorien jedenfalls verstanden.
  • Jeder Bilderordner beinhaltet seine jeweiligen Bilder, diese müssen benannt werden, wie folgt: image1.jpg, image2.jpg, image3.jpg, etc. - immer jpg, in jedem Ordner wird neu mit der Zählung begonnen.
  • Die Anzahl an Seiten (für die Umfrage) wird an der Anzahl der Bilder berechnet. Der Ordner mit den wenigsten Bildern bestimmt, es berechnet sich dann Bilderanzahl im Ordner / 2 = Seitenanzahl.
  • Die Daten werden in eine Textdatei geschrieben. Sicher, es ist nicht die beste Wahl, aber sollte gehen. Nach ungefähr 100 Einträgen wäre vielleicht Backup ganz sinnvoll. Die Textdatei wird automatisch erzeugt.
  • Eine Umfrage-Tour findet innerhalb einer Session statt. Wenn es Probleme gibt - einmal die Session beenden (z.B. alle Browserfenster schließen).
  • Gespeichert wird eine ID (eigentlich gar nicht notwendig, sehe ich gerade... naja, ich lasse sie jetzt drin) sowie stets Seite und der Pfad des gewählten Bildes. Die Einträge sind via Semikolon separiert. Eine ganze Tour via Zeilenumbruch. Man könnte die Datei später also in Excel importieren. Dazu sollte dieser Guide befolgt werden.

Und zu guter Letzt noch ein Hinweis: Ich habe es nicht zum Erbrechen getestet. Vor allem nicht für den Fall mehrerer Benutzer, die gleichzeitig ihre Daten absenden. Ein Handling ist allerdings dafür integriert.

0
@regex9

Achso der CSS-Selektor img kann sicher raus. Ich habe nur zum Testen die Bilder auf dieselbe Breite von 25% gebracht.

0

<!DOCTYPE html>

<html>
	<head>
        <title>HAW-Befragung-Experimantelle-Designs-Lewandowski-Gruppe-Walter,Moeller,Jass</title>
       <link rel="stylesheet" type="text/css" href="hubsch.css">
        <style>
	span {font-size: 20px; font-family: "verdana, arial, helvetica, sans-serif"} 
	   </style>
    </head>


      
  
    

 <body onload="f()"> 
<div id="box1">
 <button id="navili" onclick="dec()">-</button><button name="Frage" id="bl" onclick="f()">Neue Liste</button><button id="navire" onclick="inc()">+      
  
</button>
      
</div>

     <script>
		var page = 1; // start-seite 
		let cResults = 6; //Anzahl der ergebnisse pro seite
		let cChoices = 3; //Anzahl der variationen (emoji, s/w, keins)
		let nChoices = 2; //Wie oft darf eine Variante auftauchen
		
		var inc = () => {page = Math.min(page+1, 7); f();}
		var dec = () => {page = Math.max(page-1, 1); f();}

        
        
        //genau hier wäre meine Frage: Die var page 1-7 kann man die einzelnd bearbeiten? also zB: auf page 2 (var page 2) dann:<div> <img src="GoogleWiss2.JPG" alt="Einfluss von Hitze auf Herz- Kreislauferkrankungen" height="150" width="760"></div>
        

        
        
        
		let rndFromArr = (arr) => { let s = Math.floor(Math.random() * arr.length); let r = arr[s]; arr.splice(s, 1); return r; }
		var f = () => {
			let el = document.getElementById("links")
			let bl = document.getElementById("bl");
			bl.innerText = "Frage("+page+")";
			el.innerHTML = "";
			let choices = [];
			for(let i = 0; i < cChoices; i++) {
				for(let j = 0; j < nChoices; j++) {
					choices.push(i);
				}
			}
			
			for(let i = 0; i < cResults; i++)
			{
				let choice = rndFromArr(choices);
				let img = document.createElement("img");
				let num = document.createElement("span");
				num.innerText = (i+1) + ")";
				img.src = page + "." + (i+1) + "." + (choice+1) + ".jpg";
				el.appendChild(num);
				el.appendChild(img);
				el.appendChild(document.createElement("br"));
				el.appendChild(document.createElement("hr"));
			}
			
	}

      
 </scripmailto:IchhabkeineAhnungwasichhiertue.com 
     
     
     <div id="links">
 </div>
     <form id="Formular1" action="mailto:IchhabkeineAhnungwasichhiertue.com" method="post" enctype="text/plain">
         <table>
       <td>Suchtreffer Nummer:</td>
    <td><select name="Suchtreffer">
    <option value="Snippet1">Ergebnis 1</option>
    <option value="Snippet1">Ergebnis 2</option>
    <option value="Snippet1">Ergebnis 3</option>
    <option value="Snippet1">Ergebnis 4</option>
    <option value="Snippet1">Ergebnis 5</option>
    <option value="Snippet1">Ergebnis 6</option>
        </select>
        
        <td><input type="reset"/></td>
             <td><input type="submit" value="Antwort Absenden" />
        
        </table>
     </form> 
   
          <form id="Formular2" action="mailto:IchhabkeineAhnungwasichhiertue.com" method="post" enctype="text/plain">
         <table>
       <td>Ergebnis ID</td>
    <td><select name="Ergebnis ID">
    <option value="ID 1.1.1">ID 1.1.1</option>
    <option value="ID 1.1.2">ID 1.1.2</option>
    <option value="ID 1.1.3">ID 1.1.3</option>
    <option value="ID 1.1.4">ID 1.1.4</option>
    <option value="ID 1.1.5">ID 1.1.5</option>
    <option value="ID 1.1.6">ID 1.1.6</option>
        </select>
        
        <td><input type="reset"/></td>
             <td><input type="submit" value="Antwort Absenden" />
        
        </table>
     </form>
     
   
 </body>
</html>

 - (Computer, Technik, Technologie)

Wie schaffe ich es, dass das "Nicht-Sicher" in Chrome weg geht?

Wie schaffe ich es, dass das "Nicht-Sicher" in Chrome weg geht und meine Scripte direkt vollständig geladen werden?

Live-Ansicht: www._______.com

Ihr müsst für die Entwickler Ansicht STRG + SHIFT + I drücken, da ich das Menü deaktiviert habe.

Aktueller Code:

 <html lang="en" oncontextmenu="return false;">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
  <link href="style.css" type="text/css" rel="stylesheet">
  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
  <script type="text/javascript" src="js/jquery.cookie.js"></script>  <script type="text/javascript">  $(document).ready(function() {  $('body header a').click( function() {   var text = $(this).text();   $("#main").load(text + ".html");  }); });  </script>
<!-- Das ist das aktuelle Script (für Gutefrage.net und Foren)-->     <script type="text/javascript"> $(document).ready(function(){ $('#close1').click(function() {  $('#warn1').slideUp(); }); }); </script>
  <title>TheLegalGroup</title> </head>
 <body>  <header>   <a href="#home" class="button" id="m_home">Home</a>   <a href="#apply" class="button" id="m_apply">Apply</a>   <a href="#map" class="button" id="m_map">Map</a>   <a href="#news" class="button" id="m_news">News</a> </header>  <div id="warn1">   <a id="close1">×</a>   <p>This website is in beta status!</p>
  </div>  <div id="warn2">
  </div>  <div id="main">   <a id="share" href="https://api.whatsapp.com/send?text=https://thelegalgroup.netlify.com/">...</a>
   <p>This is an example</p>  </div>  </body>
</html>
...zur Frage

Wie kann ich einstellen, dass die div-Boxen auf dem Handy untereinander dargestellt werden?

Guten Tag.

Mein Problem ist Folgendes: Auf dem PC werden die Boxen ganz normal und wie gewollt dargestellt, doch auf dem Handy wird alles in die Reihe gequetscht und man kann nichts erkennen. Wie kann ich nun einstellen, dass die div-Boxen untereinander dargestellt werden?

LG

Quellcode:

<?php
  require('templates/header.php');
?>

<div class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Kampagnen</h3>
        </div>
        <br><br>
        <div class="row">
          <div class="col-xs-12">
            <div class="box box-container">
              <div class="row">
                <div class="col-xs-12">
                  <div class="box-first box-container">
                    <div class="row">
                      <div class="col-xs-1">
                        <div class="row">
                          <div class="col-xs">
                            <div class="box-nested" text-align="center">
                              <img src="templates/XXX.png"/>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <strong> XXX </strong>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <h4>
                            <span class="badge badge-pill badge-success">XXX: 1,10€</span>
                            <span class="badge badge-pill badge-secondary">XXX: 1,00€</span>
                          </h4>
                        </div>
                      </div>
                      <div class="col-xs-4">
                        <div class="box-nested">
                          <span>
                            <h4>
                              <font color="#400040">
                                <input name="text" id="myInput" id="text" width="100%;" ?>">
                                <button class="badge badge-pill badge-danger" onclick="myFunction()">Link Kopieren</button>
                              </h4>
                            </font>
                            <script>

                              function myFunction() {
                                var copyText = document.getElementById("myInput");
                                copyText.select();
                                document.execCommand("copy");
                              }
                            </script>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-body all-icons">
          <div class="row">
            <div class="wrap-table100">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<?php
  require('templates/footer.php');
?>

Das CSS, welches zugegebener Weise sehr unübersichtlich ist^^, lautet wie folgt:

https://pastebin.com/hHsGJhFE

...zur Frage

Was möchtest Du wissen?