使用WordPress作為街頭訪問工具(Presented)

This is the old version of the deck which was used during the talk. This is meant for our video production only. For best content, please see the updated version of the deck.

Transcript

1. 使用 WordPress 作為街頭訪問工具 Using WordPress to Conduct Street Surveys Victor K. Nip Hong Kong WordPress Meetup #92 2025-12-11
2. About Victor K. Nip
3. Experience Sharing I will share his experience using WordPress as a street survey tool for a visitor survey at a mid-sized shopping mall. I will share • a list of plugins used in building the tool, • the reasons for choosing WordPress for this project, and • some advantages, disadvantages, and considerations for using web applications as survey tools.
4. Why This Topic (Again)? Recently the Government has a project having such survey system as part of the requirement of a bid. Surveys are needed in many commercial and academic activities. Someone needs to talk in this slot.
5. Note We will look at the projects not only from a technical person’s perspective This is experience sharing; it may not cover every aspects in the topic
6. Project: Shopping Center Survey • Date: June 2018 • Objectives: 1. Understand the demographics of visitors (Visitor Survey) 2. Understand the demographics of people roaming in the surrounding area (1-km Survey) • Methodology: Send interviewers to interview visitors
7. Respondent Characteristics • Randomly picked • No specific requirements for respondents other than “being there” • Limited number of questions to answer
8. Web App Functions Multilingual capability Caching questionnaire inputs Location tracking Device testing (location tracking) Help page
9. https://survey.viva.ws/
10. Web App Contents HOME (INDEX OF SURVEYS) CLEAR CACHE TEST DEVICE HELP/ABOUT LOGIN/LOGOUT LANGUAGE SELECTOR ADMIN FUNCTIONS (REPORTING)
11. https://survey.viva.ws/survey/kcp-visitor-survey/
12. Questionnaire Form Plugin: WP User Frontend • Form configuration • https://survey.viva.ws/wp- admin/admin.php?page=w puf-post- forms&action=edit&id=106 6 • Note the following: • Meta data (Bottom of form) • Conditional Logic (#3) • Custom logic with JavaScript (#1)
13. Reports • Visitor Survey • https://survey.viva.ws/hk/report/kcp- visitor-survey-report-2/ (main) • https://survey.viva.ws/hk/report/kcp- visitor-survey-report-3/ (wish list) • 1-Km Survey • https://survey.viva.ws/hk/report/kcp- visitor-survey-report-2/
14. 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 • Need battery management
15. Comparing with Google Form/Microsoft Forms/SurveyMonkey Advantages • Flexibility in content • Flexibility in building in logic • Data stored in your server (privacy) • Branding/Professionalism: form layout, interviewee experience Disadvantages • Time consuming to build and test • Requires technical skills
16. Collecting Meta Data Survey identifier Unique submission identifier IP address Username of interviewer Longitude, latitude → distance from certain point Start time, end time → duration Browser version (for debugging) Form version, form URL (for debugging)
17. Testing Geolocation <div id="gps">Testing your device/browser's geolocation capability...</div> <div id="hints"> If you are using Chrome running on Android, choose in Chrome: Menu &gt; Settings &gt; Site settings &gt; Location. Make sure "Ask before allowing sites..." is on and make sure "https://survey.viva.ws" is not in "Blocked". If you are running Safari on iOS devices, from Home Screen go to Settings &gt; Privacy, make sure "Location Services" is turned on, and "Safari Websites" is set to "While Using the App". </div> <script> <!-- 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."; } //--> </script>
18. Clearing “Cache” The cache for this web app has been cleared. <script> <!-- document.cookie.split(";").forEach(function(c) { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); }); console.log(document.cookie); //--> </script>
19. Skills Involved Technical • WordPress • HTML • CSS • JavaScript • PHP • Pods or other CPT Framework Non-Technical • Project Management • Marketing Research
20. Plugin List Core Functions • Adminimize (permissions) • Pods (custom Content Types and Fields) • qTranslate-XT (multi-lingual) • Ultimate Member (user management) • WP All Export (data export) • WP User Frontend + WP User Frontend Pro (input form, free + paid) Supporting Functions • Head, Footer and Post Injections (inject PHP codes) • Insert HTML Snippet (manage PHP codes) • Microthemer (css styling)
21. WP User Frontend https://wedevs.com/wp-user-frontend-pro/pricing/
22. Some Learning/Suggestions Rehearse Gather feedback from interviewers during debriefing sessions (2-way communications) Build Cache: Save ongoing questionnaire periodically in cookie or localstorage
23. 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 real-time monitoring and update selection after rehearsal, during the process, and after debriefing • Show all questions or show by step?
24. Other Considerations
25. Q&A