|
| 1 | +<div class="survey-popup" id="surveyPopup"> |
| 2 | + <div class="survey-content"> |
| 3 | + <button class="close-btn">×</button> |
| 4 | + <h2>Help us improve the FORRT website</h2> |
| 5 | + <p>We would be grateful if you could complete this survey. |
| 6 | + Your feedback will directly inform improvements to navigation, accessibility, and content structure.<br> |
| 7 | + <strong>Note:</strong>All answers are anonymous and will help us make the website better for everyone!</p> |
| 8 | + <a href="https://docs.google.com/forms/d/e/1FAIpQLSeeopWpzqf0IEk8rAvxu8Pv5DoGRGK3aDvql1a3VapQ5_5bVg/viewform" |
| 9 | + target="_blank" |
| 10 | + rel="noopener" |
| 11 | + class="survey-button" |
| 12 | + id="surveyLink"> |
| 13 | + Take the Survey |
| 14 | + </a> |
| 15 | + </div> |
| 16 | +</div> |
| 17 | + |
| 18 | +<style> |
| 19 | + .survey-popup { |
| 20 | + position: fixed; |
| 21 | + top: 0; |
| 22 | + left: 0; |
| 23 | + width: 100%; |
| 24 | + height: 100%; |
| 25 | + background: rgba(0, 0, 0, 0.6); |
| 26 | + display: none; |
| 27 | + justify-content: center; |
| 28 | + align-items: center; |
| 29 | + z-index: 1000; |
| 30 | + } |
| 31 | + |
| 32 | + .survey-content { |
| 33 | + background: white; |
| 34 | + padding: 2rem; |
| 35 | + border-radius: 15px; |
| 36 | + max-width: 800px; |
| 37 | + position: relative; |
| 38 | + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| 39 | + text-align: center; |
| 40 | + } |
| 41 | + |
| 42 | + .close-btn { |
| 43 | + position: absolute; |
| 44 | + top: 15px; |
| 45 | + right: 15px; |
| 46 | + background: none; |
| 47 | + border: none; |
| 48 | + font-size: 1.5rem; |
| 49 | + cursor: pointer; |
| 50 | + color: #666; |
| 51 | + } |
| 52 | + |
| 53 | + .survey-button { |
| 54 | + display: inline-block; |
| 55 | + background: #4CAF50; |
| 56 | + color: white; |
| 57 | + padding: 12px 24px; |
| 58 | + border-radius: 25px; |
| 59 | + text-decoration: none; |
| 60 | + margin-top: 1rem; |
| 61 | + transition: transform 0.2s, background 0.2s; |
| 62 | + } |
| 63 | + |
| 64 | + .survey-button:hover { |
| 65 | + background: #45a049; |
| 66 | + transform: translateY(-2px); |
| 67 | + } |
| 68 | + a.survey-button:hover { |
| 69 | + color: white; |
| 70 | + } |
| 71 | + |
| 72 | + h2 { |
| 73 | + color: #2c3e50; |
| 74 | + margin-bottom: 1rem; |
| 75 | + } |
| 76 | + |
| 77 | + p { |
| 78 | + color: #666; |
| 79 | + line-height: 1.6; |
| 80 | + margin: 1rem 0; |
| 81 | + } |
| 82 | + |
| 83 | + @media (max-width: 600px) { |
| 84 | + .survey-content { |
| 85 | + width: 90%; |
| 86 | + padding: 1.5rem; |
| 87 | + } |
| 88 | + } |
| 89 | +</style> |
| 90 | + |
| 91 | +<!-- The below Cookie functions manage visit counts by retrieving and updating a cookie, |
| 92 | +while the survey shows only on the 5th visit if it hasn't been completed. |
| 93 | +Once the survey is completed, its state is saved in localStorage, |
| 94 | +preventing further popups on subsequent visits. --> |
| 95 | + |
| 96 | +<script> |
| 97 | + // Helper function to get a cookie value |
| 98 | + function getCookie(name) { |
| 99 | + const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)')); |
| 100 | + return match ? match[2] : null; |
| 101 | + } |
| 102 | + |
| 103 | + // Helper function to set a cookie |
| 104 | + function setCookie(name, value, days = 365) { |
| 105 | + const expires = new Date(Date.now() + days * 864e5).toUTCString(); |
| 106 | + document.cookie = `${name}=${value}; expires=${expires}; path=/`; |
| 107 | + } |
| 108 | + |
| 109 | + document.addEventListener('DOMContentLoaded', function () { |
| 110 | + const hasCompleted = localStorage.getItem('surveyCompleted') === 'true'; |
| 111 | + |
| 112 | + let visitCount = parseInt(getCookie('visitCount')) || 0; |
| 113 | + visitCount++; |
| 114 | + setCookie('visitCount', visitCount); |
| 115 | + |
| 116 | + if (!hasCompleted && visitCount >= 5) { |
| 117 | + document.getElementById('surveyPopup').style.display = 'flex'; |
| 118 | + } |
| 119 | + |
| 120 | + // Close button handler |
| 121 | + document.querySelector('.close-btn').addEventListener('click', function () { |
| 122 | + closeSurvey(); |
| 123 | + }); |
| 124 | + |
| 125 | + // Survey link handler |
| 126 | + document.getElementById('surveyLink').addEventListener('click', function () { |
| 127 | + localStorage.setItem('surveyCompleted', 'true'); |
| 128 | + closeSurvey(); |
| 129 | + }); |
| 130 | + }); |
| 131 | + |
| 132 | + function closeSurvey() { |
| 133 | + document.getElementById('surveyPopup').style.display = 'none'; |
| 134 | + } |
| 135 | +</script> |
0 commit comments