經驗分享：開發和使用 WordPress 網絡應用 程序作為調查工具 Experience Sharing: Developing and Using WordPress Web App to Conduct Survey Victor K. Nip Hong Kong WordPress Meetup 2020-7-22

簡歷 / Bio Victor是一名科技愛好者，超齡學生， WP/系統開發人員，WCHK組織者，並 且從某些角度看是一個好人。 他曾於 2018年6月在Hong Kong WordPress Meetup中演講。 Victor is a tech enthusiast, overaged student, WP/system developer, WordCamp Hong Kong organizer, and arguably a good person. He previously spoke in Hong Kong WordPress Meetup in June 2018.

經驗分享 / Experience Sharing 在這次聚會中，講者將分享他在兩個完全不同的項 目中開發和使用WordPress 網絡應用程序 (web app) 作為調查工具的經驗。 項目1是香港一家中型 購物中心的訪客調查。 項目2是一個學術專案，需 要從社交媒體營銷公司中的選定員工收集專家意見。 在會議結束時，講者將分享用於建構該等網絡應用 程序的插件列表。 In this meet up, Victor will share his experience in developing and using WordPress web apps to conduct surveys in two completely different projects. Project 1 is a visitor survey for a medium-sized shopping mall in Hong Kong. Project 2 is a course project which needs to collect expert opinion from selected employees within a social-media marketing company. In the end of the session, Victor will share the list of plugins used to build the web apps.

Note: •We will look at the projects not only from a technical person’s perspective •This is experience sharing; I’m not presenting as expert

• Date: June 2018 • Objectives: • Understand the demographics of visitors (Visitor Survey) • Understand the demographics of people roaming in the surrounding area (1-km Survey) • Methodology: Send interviewers to do interview visitors Project 1: Shopping Center Survey

Respondent Characteristics • Random respondents • No specific requirements for respondents • Limited number of questions to answer

No content

Functions • Multilingual capability • Caching questionnaire inputs • Location tracking • Device testing • JavaScript version • Location tracking • Help page

Testing Geolocation <!-- function showPosition(position) { document.getElementById("gps").innerHTML = "Latitude: " + position.coords.latitude.toFixed(6) + "<br>" + "Longitude: " + position.coords.longitude.toFixed(6) + "<br>Your device/browser passed the geolocation test."; document.getElementById("hints").style.display = "none"; } if (navigator.geolocation) { document.getElementById("gps").innerHTML = "Your device/browser has blocked geolocation tracking."; navigator.geolocation.getCurrentPosition(showPosition); } else { document.getElementById("gps").innerHTML = "Your device/browser does not support geolocation tracking."; } //-->

Testing JavaScript Version <!-- let test_text = "OK"; //--> <!-- if (test_text == "OK") { document.getElementById("test_text").innerHTML = "Your browser passed the script test."; } else { document.getElementById("test_text").innerHTML = "Your browser failed the script test."; } //-->

Clearing “Cache” The cache for this web app has been cleared. <!-- document.cookie.split(";").forEach(function(c) { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); }); console.log(document.cookie); //-->

Comparing with Paper Questionnaires Advantages • Avoid reentering of data • Build in logic • Save paper • Recording of meta-data Disadvantages • Time consuming for entering Chinese texts on the spot • Respondents may need to wait too long for surveyor complete • When BYOD • May not look professional when surveyors use their own devices • Settings in devices may block certain features • Battery power management

• Date: January to May 2020 • Objective: • To gather expert opinion on the SEO value of search terms under different circumstances • Data gathered were used for machine learning • Methodology: Ask respondents to complete 40 different questionnaires with 60 responses required for each questionnaire Project 2: Academic Project Survey

Respondent Characteristics • Expert respondents only (limited to employees of sponsor) • Each respondent has to answer a large number of questions (2400)

No content

No content

No content

Functions • Multilingual capability • Dashboard • Presentation of relevant information and data in questionnaire form • Image engineering stuffs • Blog • Contact Me • Privacy policy

Comparing with SurveyMonkey Advantages • Flexibility in content • Flexibility in building in logic • Data stored in your server • Less out-of-pocket cost Disadvantages • Time consuming to build and test • Requires technical skills

Skills Involved Technical • WordPress • HTML • CSS • JavaScript • PHP • Pods or other CPT Framework Non-Technical • Project Management • Marketing Research

Plugin List (Shopping Center Survey) Core Functions • Adminimize • Pods – Custom Content Types and Fields • qTranslate-X / qTranslate-XT • Ultimate Member • WP All Export • WP User Frontend + WP User Frontend Pro Supporting Functions • Head, Footer and Post Injections • Insert HTML Snippet • Microthemer

Plugin List (Academic Project Survey) Core Functions • Adminimize • Classic Editor • Pods – Custom Content Types and Fields • qTranslate-X / qTranslate-XT • Super Socializer • Ultimate Member • User Role Editor • WP User Frontend + WP User Frontend Pro Supporting Functions • Contact Form 7 • Document Embedder • Insert PHP Code Snippet • VVAme chat / Join.chat • Microthemer • Raw HTML Snippets • WP Mail SMTP

WP User Frontend https://wedevs.com/wp-user-frontend-pro/pricing/

Some Learning/Suggestions Shopping Center Survey • Rehearse • Gather feedback from interviewers during debriefing sessions (2-way communications) • Build Cache: Save ongoing questionnaire periodically in cookie or localstorage Academic Project Survey • Talk to your stakeholders (esp. respondents) before the survey • Show information whenever necessary (nudge, definition of scores, data) • How to chase after your experts • Allocation of questions to respondents

Allocation of questions to respondents Week 1 Week 2 Week 3 Week 4 Group 1 Batch 1 Batch 2 Batch 3 Batch 4 Group 2 Batch 5 Batch 6 Batch 1 Batch 2 Group 3 Batch 3 Batch 4 Batch 5 Batch 6 Week 1 Week 2 Week 3 Week 4 Group 1 Batch 1 Batch 2 Batch 3 Batch 4 Group 2 Batch 1 Batch 2 Batch 3 Batch 4 Group 3 Batch 1 Batch 2 Batch 3 Batch 4 Week 1 Week 2 Week 3 Week 4 Group 1 Batch 1 Batch 2 Batch 3 Batch 4 Group 2 Batch 1 Batch 4 Batch 2 Batch 3 Group 3 Batch 1 Batch 3 Batch 4 Batch 2 Week 1 Week 2 Week 3 Week 4 Group 1 Batch 1 Batch 2 Batch 3 Batch 4 Group 2 Batch 3 Batch 4 Batch 1 Batch 2 Group 3 Batch 5 Batch 6 Batch 7 Batch 8 Group 4 Batch 7 Batch 8 Batch 5 Batch 6 Original plan: Actually no grouping; risk of no responses for Batch 4 Adjusted plan: Grouping to ensure enough responses for Batch 4 questions Possible alternative: 6 batches of questions; Same workload for each respondent Stretched alternative: 8 batches of questions; same workload; risky if response rate is not close to 100% Total respondents 12 Total questions 800 Respondents per question 12 Questions for each respondent 800 Total respondents 12 Total questions 1200 Respondents per question 8 Questions for each respondent 800 Total respondents 12 Total questions 1600 Respondents per question 6 Questions for each respondent 800 Likely the best balance between number of questions and quality of responses

Design Considerations • Single selection: Use radio button, don’t use dropdown list • Multiple selections: Use check boxes, don’t use multiple selection list box • Scale up check boxes and radio buttons in CSS [type="checkbox"], [type="radio"] { -ms-transform: scale(2); -webkit-transform: scale(2); transform: scale(2); } • “Others”: consider monitoring and update selection after rehearsal, during the process, and after debriefing • Show all questions or show by step?

Other Considerations • Device (iPad, BYOD, or simply paper) • Question types • Branding • Budget • Development lead time • Survey methodology • Respondent characteristics

Web App Contents Shopping Center Survey • Home (Index of surveys) • Clear Cache • Test Device • Help/About • Login/logout • Language selector • Admin functions (reporting) Academic Project Survey • Home (Dashboard) • About • Blog • Contact Me • Privacy Policy • Login/logout • Language selector • Admin functions (reporting)

Meta Data • Survey identifier • Submission identifier • IP address • Username • Longitude, latitude, distance from certain point • Start time, end time, duration • Browser version • Form version, form URL • Specific user’s actions (File downloaded, etc.)