The Lighthouse Studio Scripting Series JavaScript
2 HTML
3 CSS
4 JavaScript
5 jquery (enhanced JavaScript)
6 Perl
7 HTML (Hyper Text Markup Language)
8 HTML
9 What is HTML? HTML is the language for creating web pages. View Source" on any web page to see HTML HTML tags Open, close tags. Identify sections of your page. Not displayed to user in browser. Optional attributes What is <b>your</b> name? <div class="question"> How old are you? </div>
10 CSS (Cascading Style Sheets)
11 CSS
12 What is CSS? CSS allows you to add style to your page (color, position, formatting, etc.) With CSS you can change the appearance of your page without having to change the underlying HTML (kind of like wall paper) Learning a bit of CSS can help you to modify the functionality of your web page together with JavaScript and jquery.
13 CSS - HTML The <div> tag defines a block on the page. An "id" identifies the tag. Unique name. One per page. A "class" defines a group of tags. Multiple per page.
14 CSS Rules /* CSS comment */ selector { property: value; property: value; } /* CSS example All <p> tags will have blue text and a black border around them. */ p { color: blue; border: 1px solid black; }
15 CSS Rules In addition to HTML tags "ids" and "classes" can be used The "#" is used for "ids" unique, one per page The "." for "classes" a group, multiple per page <div id="q1_div" class="question">...</div> <style> #Q1_div { color: blue; }.question { border: 2px solid red; } </style>
16 CSS Hooks in Lighthouse The HTML for every page and question in Lighthouse has classes and ids that you can write CSS for.
17 JavaScript
18 JavaScript
19 What is JavaScript? A scripting language Code executed by the browser (not on server) JavaScript and Java are not the same thing Enables you to interact with the web page without having to submit to the sever Popup boxes Display total of numeric input on screen while you are typing Custom verification Can be embedded directly into Lighthouse pages or imported from an outside file
20 Where can JavaScript be used in Lighthouse? Anywhere you can type text (almost) Questions, attributes and levels, list items, etc. Within a question s HTML <head> tag Under the Advanced button for most questions (this is on a specific page of the study) Within the survey s global HTML <head> tag On the Headers and Footers tab in Survey Settings (this is on all pages in the study)
21 Script Tags To enter JavaScript into Lighthouse Use an HTML <script> tag within Lighthouse <script> alert("hello world!"); </script> Use an external JavaScript file (library) <script src="[%graphicspath()%]mylibrary.js"> </script>
22 Variables "Containers" that store data var total = 0; // this declares one variable total = 3 + 4; // this assigns a value //The variable total can now be used. var GrandTotal = total + 1000; // Words (non-numeric) must be surrounded in quotes. var BaseName = "Quest"; //QName below will be "QuestA" var QName = BaseName + "A";
23 Arrays List of values var MonthArray = ["Jan", "Feb", "Mar", "Apr"]; 0 1 2 3 4 Jan Feb Mar Apr May MonthArray[0]; //returns "Jan" MonthArray[3]; //returns "Apr" var ScoresArray = [34, 23, 54, 23]; var OneValue = 0; /* Assign 2 nd value in array. Arrays are 0 based */ OneValue = ScoresArray[1];
24 Math Mathematical operators, similar to excel var Years = 38; var Total = 0; Total = (Years 13) * 20; //++ Quick way to add 1. Used in loops. Total++;
25 Branching with if var base_income = 70000; var income_level = 0; if (base_income < 50000) { // This code only runs if income < 50000 income_level = 1; } // This line always runs income_level = income_level * 4;
26 Branching with if, else if, else if (income < 50000) { IncomeLevel = 1; } else if ((income >= 50000) && (income < 100000)) { IncomeLevel = 2; } else { IncomeLevel = 3; } /* IncomeLevel will only get assigned once, 1,2,or 3. && AND OR == Compare if two values are equal.!= Not Equal */
27 Looping with for Use when code should be run a known number of times var ScoresArray = [23, 45, 32, 12]; var ArraySize = ScoresArray.length; var Sum = 0; //Initialize, test, increment for (i = 0; i < ArraySize; i++) { //Same as Sum = Sum + ScoresArray[i]; Sum += ScoresArray[i]; } //Sum now contains 112 or 23+45+32+12
28 Functions Allows you to package up and reuse JavaScript code over and over function ComputeNums (Num1, Num2) { var Result = (Num1 + Num2) * 17; return Result; } var Result1 = ComputeNums(52, 43); var Result2 = ComputeNums(18, 68);
29 Objects Variables that give you access to different fields and functions The "." notation var ArraySize = ScoresArray.length; var CurDate = new Date(); var Year = CurDate.getFullYear(); //Write to screen the current year. document.write("year is " + Year);
30 Make sure it s a number Often you need to make sure what you are dealing with is a number parseint(); parsefloat(); var first_num = parseint(input);
31 Lighthouse built in JavaScript Lighthouse uses JavaScript graphics/system/ssi_javascriptx_x_x.js jquery and jquery UI built in Graphics folder tour "JavaScript in Lighthouse Studio" section in Lighthouse Help shows built-in functions SSI_GetValue, SSI_PriceFormat(), SSI_RadioReset()
32 Example //Get answer to Q1 on current page. var Q1Val = SSI_GetValue("Q1"); //Set answer on current page. //Useful to set a default. var Q2Obj = SSI_GetFormObject("Q2"); Q2Obj.value = 46; //Returns a number formatted as a price //Number,Thousand,Decimal,NumDecimalPlaces var Price = 3456; Price = SSI_PriceFormat(Price, ",", ".", 2); //returns 3,456.00
33 Example //Get an answer from a prior page by using //A bit of SSI Script. Remember, SSI Script //loads on server prior to coming down to browser. var PriorAnswer = "[%Name%]"; //The above is translated to var PriorAnswer = "Bob"; //and then sent down to the browser to run as JavaScript.
34 Graphical Select Graphical Select checkboxes and radio buttons add complexity making them harder to customize We have provided SSI_CustomGraphicalCheckbox and SSI_CustomGraphicalRadiobox to help //This gets called every time they click on a checkbox after system code runs. function SSI_CustomGraphicalCheckbox(GraphicalCheckboxObj, InputObj, blncheck) { //Add custom code here. } function SSI_CustomGraphicalRadiobox(GraphicalRadioboxObj, InputObj) { //Empty function. Redefine this function in custom code. }
35 Custom Verification Lighthouse verifies that questions are answered and that the answers are in the right format etc. using JavaScript You can customize question verification using "Custom JavaScript Verification" available behind the Advanced button of most questions If you detect an error set "strerrormessage" equal to an error message
36 Debugging Trying to debug a problem? Simplify, simplify, simplify. Make the problem simpler and try and isolate where the problem is coming from. Divide and conquer. Use Chrome Developer Tools. This allows you to step through JavaScript code. Right click, Inspect Print out values at certain points in the script alert( message here ); console.log( message here );
37 References Great JavaScript tutorial: www.w3schools.com/js "JavaScript in Lighthouse Studio" section in Lighthouse Help
38 jquery (JavaScript Library)
39 jquery (enhanced JavaScript)
40 What is jquery? jquery is a JavaScript library. It allows you to write powerful JavaScript in a simple way. jquery is compatible across multiple browsers. Included in Lighthouse Studio Learn jquery: http://learn.jquery.com http://api.jquery.com Google: jquery addclass
41 jquery Objects jquery makes it simple to interact with HTML. Using a bit of CSS to select the HTML you can create a powerful jquery/javascript object. //Assume this HTML <input id="n1" name="n1" type="text"> $("#n1").attr("placeholder", "Please type here"); CSS Selector Function call
42 jquery Objects
43 jquery Objects jquery objects are not regular JavaScript DOM objects. To get the DOM object do this: $("#n1")[0].value(5); The HTML DOM objects are actually stored as an array inside of the jquery object. To check for jquery object existence: if($("#n1_div.footer").length) { //Item exists, change HTML in footer to "hello" $("#n1_div.footer").html("hello"); }
44 Wait for Page Load Often you will want to make sure the web page has loaded before your code runs. <script> $(document).ready(function() { //This code runs after full page load. $("#n1").attr("placeholder", "Please type here"); }); </script>
45 jquery Each (Looping) Using the Each function makes it easy to walk through all items on the page that match a certain selector. //Loop through all HTML with class "options" //Turn each one red. $(".options").each(function() { //"this" represents current instance. $(this).css("background-color", "red"); }); //Does the same thing, but cannot code for each instance. $(".options").css("background-color", "red"); All items matched with selector (".options" above) will be affected. "this" keyword represents current instance.
46 jquery - Traversing jquery makes it easy to get around in the HTML //Assume HTML <tr class="clickable"> <td class="input_cell"> <input id="s_1" type="text"> </td> </tr> //Get parent and turn it red ClickableObj = $("#s_1").closest(".clickable"); ClickableObj.css("background-color", "red"); Two great Traversing functions:.closest() Looks through HTML above you..find() Looks at HTML inside of you. See: http://api.jquery.com/category/traversing/
47 Change Existing HTML Rather than using Free Format, try changing an existing question by using jquery. Functions:.html(),.before(),.append(),.hide() $("#q1_div.header1").html( New text here"); $(".grid_row1").before("<tr><td style=\"padding-top: 20px; font-weight: bold;\" colspan=\"6\">restaurants</td></tr>");
48 jquery Events Events happen as the user interacts with the browser. (See http://api.jquery.com/category/events/) //Change question background color when mouseover $(".question").on("mouseover", (function() { $(this).css("background-color", "blue"); }); //Change back to white on mouseout $(".question").on("mouseout", (function() { $(this).css("background-color", "white"); }); //This can also be done with addclass, removeclass $(".question").on("mouseover", (function() { $(this).addclass("highlight"); });
49 jquery UI Additional JavaScript library. Includes powerful prebuilt functionality. See: http://jqueryui.com/ Sorting, Drag and Drop, Calendar, etc. Comes with Lighthouse Studio Framework icons are available //jquery UI comes with icons that you can use by referring to classes <div class="ui-state-default ui-corner-all" style="width:20px"> <span class="ui-icon ui-icon-circle-check"></span> </div>
50 Access our suite-holder exclusive jquery webinar here! http://www.sawtoothsoftware.com/1622
51 QUESTIONS? Justin Luster Product Manager justin@sawtoothsoftware.com Megan Peitz Ingenuity Ambassador megan@sawtoothsoftware.com www.sawtoothsoftware.com +1 801 477 4700 @sawtoothsoft