Demo surveyYou can see in action the demo survey the source code of which is included in the download package. A second and very short survey shows the result of JavaScript integration for additional item types. The jQuery UI library is used. This is NOT included in the flexSURVEY package, and please don't ask me for support on using jQuery UI! The demo survey's source codeThe complete file which includes many more annotated configuration variables and XHTML code of the page layout is included in the download package. <?php require "flexsurvey-2.0.php"; $fscfg["mysql"]["server"] = "localhost"; $fscfg["mysql"]["database"] = "XXX"; $fscfg["mysql"]["user"] = "XXX"; $fscfg["mysql"]["password"] = "XXX"; $fscfg["mysql"]["table"] = "XXX"; /* Initialize flexSURVEY. Call fsInit() after configuration. */ fsInit(); /* Let's have a simpler life. Define some functions and an "alias" for fsTable. Take this as an encouragement to write your own functions that interact with flexSURVEY. */ function p($str, $attr="") { if (strlen($attr) > 0) { if (!strpos($attr, "=")) $attr = "style=\"".$attr."\""; $attr = " ".$attr; } echo fsAdd("<p".$attr.">".$str."</p>"); } function h($level, $str, $attr="") { if (strlen($attr) > 0) $attr = " ".$attr; echo fsAdd("<h".$level. $attr.">".$str."</h".$level.">"); } function item($head, $body) { echo fsAdd("<div class=\"fsitem\">\n<div class=\"fsitemhead\">".$head."</div>\n<div class=\"fsitembody\">".$body."</div>\n</div>\n"); } function t($str) { return fsTable($str); } /********************************************************************* The survey definition. *********************************************************************/ if (fsPage("Welcome to flexSURVEY")) { p("This is a demo survey which shows some features of <a href=\"http://www.flexsurvey.de\">flexSURVEY</a>."); p("You can also look at this survey's <a href=\"http://www.flexsurvey.de/Demo\">PHP source code</a>."); p("Please be aware that both the page and item layout used here is just that of the demo survey. You can modify the design radically when building your own surveys."); p("Many things possible with flexSURVEY are not shown here. For example, with some programming skills you can have different items depending on the user's previous answers, a LDAP login, or provide individual feedback to the user. What's possible highly depends on your PHP mastery."); p("flexSURVEY only provides standard HTML form elements. If you want e.g. sliders, sorting items, or whatever, you can include your own JavaScript or use an external JavaScript library. A very short demonstration of the latter can be found in a <a href=\"demo2.php\">second demo survey</a>."); p("Have fun with flexSURVEY!"); } if (fsPage("Overview of form element types")) { fsSave("time", date("Y-m-d H:i:s"), "datetime"); fsSave("browser", $_SERVER["HTTP_USER_AGENT"]); fsSave("host", gethostbyaddr($_SERVER["REMOTE_ADDR"])); item("Please enter your name!", "{name,text}"); item("Make three wishes!", t("1.|{wish1,:Ultimate bliss.} 2.|{wish2} 3.|{wish3,password,background-color:#ffff99;} (Very secret!)")); item("If you are interested in online surveys, what topic will your surveys be about?", "{topic,textarea}"); item("What is your research context?", t("{context,radio} | I am studying at a university. {context} | I am working at a university. {context} | I am working at a company. {context} | I am working at a NGO. {context} | Other: {context_o,text}")); $fscfg["fstable"]["attr"] = "style=\"width:100%;\""; item("Please rate the importance of the following survey features.", t("(>,colspan='2') Not important | | | | Very important Flexibility | {ratefl,radio} | {ratefl} | {ratefl} | {ratefl} | {ratefl} Easy to use | {rateea} | {rateea} | {rateea} | {rateea} | {rateea} Good documentation | {ratedo} | {ratedo} | {ratedo} | {ratedo} | {ratedo} Commercial support | {ratesu} | {ratesu} | {ratesu} | {ratesu} | {ratesu} Other: {rate_o,text} | {rateot,radio} | {rateot} | {rateot} | {rateot} | {rateot}")); echo "<script type=\"text/javascript\"> function ToggleVisibility (id, id2) { if (document.getElementById(id).checked==true) document.getElementById(id2).style.visibility='visible'; else document.getElementById(id2).style.visibility='hidden'; } </script>\n"; function myJS($nr) { return "onchange=\"ToggleVisibility('feature".$nr."', 'feature".$nr."info');\""; } item("What features would you like to see in a survey software?", "<i>Click a checkbox to see some JavaScript magic.</i><br /><br />". /* Note: If we would use "," as the delimiter in the following {}s, it would become a mess because the included JavaScript contains the comma! We use "|" instead and fsTable() can deal with it well. */ t("{feature1|checkbox|".myJS(1)."} | A graphical user interface to design the survey.<br /><div id='feature1info' style='visibility:hidden; color:#ff0000;'>Sorry, flexSURVEY does not provide a GUI.</div> {feature2|".myJS(2)."} | Inclusion of my own PHP code.<br /><div id='feature2info' style='visibility:hidden; color:#009900;'>You are lucky, flexSURVEY makes inclusion of your own PHP code easy.</div> {feature3|+|".myJS(3)."} | Security features.<br /><div id='feature3info' style='visibility:hidden; color:#009900;'>Hurray, flexSURVEY comes with several security features. Please see the documentation for details.</div> {feature4|".myJS(4)."} | Automated data analyses.<br /><div id='feature4info' style='visibility:hidden; color:#ff0000;'>Sorry, flexSURVEY does not provide any tools for data analysis.</div> {feature5|".myJS(5)."} | Support for different database engines.<br /><div id='feature5info' style='visibility:hidden; color:#ff0000;'>Sorry, flexSURVEY currently only supports MySQL. This will hopefully change in the future.</div>")); $opt = fsSelOpts(array("0" => "-- Please select --", "mysql" => "MySQL", "postgresql" => "PostgreSQL", "sqlite" => "SQLite", "other" => "Other")); item("What database engine do you use most?", "{dbengine,select,".$opt."}"); } if (fsPage("Item layout")) { p("This demo survey mainly consists of item boxes containing a question area and an answer area, like this:"); item("What is your name?", "{name2,text}"); p("However, there is no need to use such an item template. You could as well lay out your form elements completely different:"); echo fsAdd("<table style=\"width:75%; text-align:center; margin:0em auto 0em auto;\"><tr><td style=\"white-space:nowrap;\">Is this confusing?<br />{chaost,text,width:10em;}<br />{chaoss,select,<option value='1'>eins</option><option value='2'>zwei</option>} {chaosc1,checkbox}[: 1:] {chaosc2,checkbox}[: 2:]<br />Choose: {chaosr,radio} or {chaosr} or maybe {chaosr}</td><td>{chaosa,textarea,background-color:#ffff99;,:Insert your text here...}</td></tr></table>"); p("Ok, that was just to show you some flexibility. Here is another way, items could look like (you are free to design them with your own HTML template):"); /* You could change $fscfg["itemtemplate"] to make this layout the default. */ echo fsAdd("<fieldset><legend><b>Do you know the muppet show?</b></legend>". t("{muppet,radio} | No. {muppet} | Yes, my favorite character is {muppet_o,text}.")."</fieldset>"); echo fsButtons(); $buttonsshown = TRUE; p("You are free to place the submit buttons whereever you want. Here is another input field below the buttons.", "margin-top:2em;"); p("Any comments?<br />{com1,textarea}", "style=\"color:#666666;\""); } if (fsPage("Mandatory items")) { p("With flexSURVEY, you can easily define rules about what form elements need to be checked or what value a input field needs to have to proceed to the next page. This page shows several examples. You can try not meeting the requirements and will see that you can not proceed."); p("(1) The simplest criteria is to give the string that the value must equal."); if (fsIsMissing("password")) $help = "<span style=\"color:#ff0000; font-weight:bold;\">(Type "neverforget", without quotation marks.)<br /></span>"; else $help = ""; item("Please enter the secret password which is "neverforget"!", $help. "{password,t,?s:neverforget}"); if (fsIsMissing("agree")) $help = "<span style=\"color:#ff0000; font-weight:bold;\"> ← Click here!</span>"; else $help = ""; item("Will you always agree with me?", "(You need to answer 'Yes'.)<br />". t("{agree,r,?s:1} | Yes.".$help." {agree} | No."));//agree must have value 1, i.e. the first needs to be choosen. p("(2) For text input fields, you can define a regular expression that needs to be matched. Here are two exampes."); /* Note that the regular expression contains a "," (between the "4" and the "8") thus we must not take it as delimiter. The "u" modifier (at the very end) is important when you use UTF-8, otherwise multibyte characters would be counted as multiple characters. We could replace the regexp match with evaluation of PHP's strlen() but again, if using UTF-8, be sure to use strlen(utf8_decode(...)). */ item("Please insert a nickname.", "Your nickname needs to be 4 to 8 characters long; it may only contain alphanumeric characters!<br />{nickname|text|maxlength='8'|?r:/^[a-z0-9]\{4,8\}$/u}"); /* Note, that within the curly braces of the next item, a comma not the vertical bar is used as seperator. The reason is that the vertical bar is needed for the regular expression and flexSURVEY would take it as its own seperator. Wow, actually you can always choose a seperator as you wish (i.e. a non-word character as defined by perl regexp). */ item("Do you like flexSURVEY?", "Your answer must be "yes", "definitely", or "absolutely" - spaces are ok before and after and "!" can be used after the answer to emphasize your liking, but no other string is accepted.<br />{likeflex,text,?r:/^ *(yes|definitely|absolutely)[ !]*$/}"); p("(3) For other form elements, you can define complex rules about which need to be checked. Again, here are two examples."); item("What would you do, if you won one million dollar?", "(Select three answers, no more and no less.)<br />". t("{won1,c} | Save it. {won2,c} | Do a world trip. {won3,c} | Buy a farm house in the south. {won4,c} | Donate it to a charity organization. {won5,c} | Give it to the maintainer of flexSURVEY. {won6,c,?e:(([won1]) + ([won2]) + ([won3]) + ([won4]) + ([won5]) + ([won6])) == -303} | Other: {wonoth,t}")); item("Do you like ice cream?", "<p>(Be consistent! People who change their mind may not proceed.)</p>". t("{ice1,r} | Yes, I love ice cream. {ice1,r} | No, I hate ice cream."). "<p style=\"margin-top:.5em;\">Well, now that I think about it:</p>". t("{ice2,r} | Well, I guess I do like ice cream. {ice2,r,?e:[ice1] == [ice2] && ([ice1] == '1' OR [ice1] == '2')} | Actually, I do not like ice cream very much.")); } if (fsPage("Dynamic contents")) { p("The next item is affected by previous answers."); if (fsDbGet("ice1") == "1") {//loves ice cream item("Hey ".fsDbGet("nickname").", you mentioned that you love ice cream.<br />What is your favourite flavor?", "My favorite flavor is {flavor,text}"); } else { $opt = fsSelOpts(array("0" => "-- Please select --", "Chocolate", "Cake", "American Cookies", "Pudding", "Lemonade")); item("Hey ".fsDbGet("nickname").", you mentioned that you do not like ice cream.<br />What is your culinary sin then?", "My sin is {sin,select,".$opt."}"); } p("The next item is randomly choosen from privous answers."); /* We use PHP's session management here to ensure that the question remains the same even if the user leaves and comes back to this page. */ if (!isset($_SESSION["wonrandom"])) { $arrRandom = array(); if (fsDbGet("won1") == 1) $arrRandom[] = "save it"; if (fsDbGet("won2") == 1) $arrRandom[] = "do a world trip"; if (fsDbGet("won3") == 1) $arrRandom[] = "buy a farm house in the south"; if (fsDbGet("won4") == 1) $arrRandom[] = "donate it to a charity organization"; if (fsDbGet("won5") == 1) $arrRandom[] = "give it to the maintainer of flexSURVEY"; $_SESSION["wonrandom"] = $arrRandom[array_rand($arrRandom)]; } item("You indicated that if you won one million dollar you would ".$_SESSION["wonrandom"].". Please explain why you would do that.", "{wonwhy,a}"); } if (fsPage("Thank you")) { p("You have succesfully finished flexSURVEY's demo survey. Hope, you enjoyed it."); p("A short <a href=\"demo2.php\">second demo survey</a> shows some JavaScript items."); p("Visit flexSURVEY at <a href=\"http://www.flexsurvey.de\" style=\"text-decoration:none;\">http://www.flexsurvey.de</a>"); $fscfg["showbutton_back"] = FALSE; $fscfg["showbutton_next"] = FALSE; } myTemplateBottom(); /* If on the last page, destroy session. */ if (fsThisPage("current")) session_destroy(); function fsHook_fsPage_currentpage() { myTemplateTop(); } /* End of file */ |