Avoid mapping different options to the same ID

Replacing non alphanumeric characters is fragile, e.g. "C++" and "C#"
both become "C-". Instead, we can use base64 encoding.

Manifest.toml

@@ -2,7 +2,7 @@
 
 julia_version = "1.8.2"
 manifest_format = "2.0"
-project_hash = "c18c5eaab58f1afb699d93a8a6f512a73acf8b7c"
+project_hash = "813d458aeace91ef95ce5c748cf72ad43f943461"
 
 [[deps.ArgParse]]
 deps = ["Logging", "TextWrap"]

Project.toml

@@ -4,6 +4,7 @@ authors = ["TEC <contact@tecosaur.net>"]
 version = "0.1.0"
 
 [deps]
+Base64 = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"
 CSV = "336ed68f-0bac-5ca0-87d4-7b16caf5d00b"
 DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"

lib/Surveys.jl

@@ -1,6 +1,7 @@
 module Surveys
 
 using Dates
+using Base64
 using Genie.Renderers.Html
 import Base: show, isvalid, isempty
 
@@ -574,13 +575,13 @@ function htmlrender(q::Union{<:Question{RadioSelect}, Question{MultiSelect}},
                 if nonempty in q.validators "true" else false end),
         '\n',
         join(map(q.field.options.options |> enumerate) do (i, opt)
-                id = string("qn-", q.id, "-", replace(opt.second, r"[^A-Za-z0-9]+" => '-'))
+                id = string("qn-", q.id, "-", base64encode(opt.second))
                 elem("label",
                     elem("input", :type => type, :id => id,
                         :name => string(q.id, "[]"), :value => html_escape(opt.second),
                         :checked => (!ismissing(value) && opt.second ∈ value),
                         if type == "radio" && q.field.other
-                            [:oninput => "document.getElementById('$(string("qn-", q.id, "---other-input"))').value = ''"]
+                            [:oninput => "document.getElementById('$(string("qn-", q.id, "--other-input"))').value = ''"]
                         else [] end...) *
                     opt.first,
                     :for => id)
@@ -598,10 +599,10 @@ function htmlrender(q::Union{<:Question{RadioSelect}, Question{MultiSelect}},
                         :id => string("qn-", q.id, "--other"), :value => "",
                         :checked => length(othervals) > 0,
                          if type == "checkbox"
-                            [:oninput => "if (!this.checked) { document.getElementById('$(string("qn-", q.id, "---other-input"))').value = '' }"]
+                            [:oninput => "if (!this.checked) { document.getElementById('$(string("qn-", q.id, "--other-input"))').value = '' }"]
                          else [] end...),
                     elem("input", :type => "text",
-                        :id => string("qn-", q.id, "---other-input"),
+                        :id => string("qn-", q.id, "--other-input"),
                         :class => "other", :placeholder => "Other",
                         :name => string(q.id, "[]"), :value => html_escape(join(othervals, ", ")),
                         :oninput => "document.getElementById('$(string("qn-", q.id, "--other"))').checked = this.value.length > 0"