使用WordPress作為街頭訪問工具

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 (KCP) • 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 • Me: built the webapp, manage the survey (excluding designing the survey)
7. Web App Functions Multilingual capability Caching questionnaire inputs Location tracking Device testing (location tracking) Help page
8. Respondent Characteristics • Randomly picked from the Plaza/street • No specific requirements for respondents other than “being there” • Limited number of questions to answer
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 (accuracy, workload) • 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, interviewer/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 Non-Technical • Project Management • Market Research
20. Plugin List Core Functions • Adminimize (backend permissions) • Pods (custom Content Types and Fields) • qTranslate-XT (multi-lingual) • Ultimate Member (user management, frontend permissions) • 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 to pages) • Insert HTML Snippet (manage HTML code snippets) • Microthemer (css styling)
21. Plugin List Core Functions • Adminimize (backend permissions) • Pods (custom Content Types and Fields) • qTranslate-XT (multi-lingual) • Ultimate Member (user management, frontend permissions) • 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 to pages) • Insert HTML Snippet (manage HTML code snippets) • Microthemer (css styling)
22. WP User Frontend https://wedevs.com/wp-user-frontend-pro/pricing/
23. Some Learning/Suggestions Rehearse Gather feedback from interviewers during debriefing sessions (2-way communications) Build Cache: Save ongoing questionnaire periodically in cookie or localstorage
24. 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?
25. Other Considerations
26. Q&A