Application Form

Information to be provided when applying to rehome or foster one of our animals.





    Questionaire

    /* * ATTENTION: The “eval” devtool has been used (maybe by default in mode: “development”). * This devtool is neither made for production nor for readable output files. * It uses “eval()” calls to create a separate source file in the browser devtools. * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) * or disable the default devtool with “devtool: false”. * If you are looking for production-ready output files, see mode: “production” (https://webpack.js.org/configuration/mode/). */ var ApplicationForm; /******/ (() => { // webpackBootstrap /******/ var __webpack_modules__ = ({ /***/ “./src/application-form.js”: /*!*********************************!*\ !*** ./src/application-form.js ***! \*********************************/ /***/ ((module) => { eval(“let questionaireElementId;\nlet petDetails;\nlet questions;\n\nfunction allChildren(element) {\n const result = [];\n Array.from(element.children).forEach((e) => {\n result.push(e);\n result.push(…allChildren(e));\n });\n return result;\n}\n\nfunction captureForm() {\n console.log(\n \”Capture questionaire inputs; questionaireElementId:%s\”,\n questionaireElementId\n );\n\n const fieldSet = document.getElementById(questionaireElementId);\n\n const inputs = allChildren(fieldSet);\n // console.log(\”Inputs\”, inputs);\n const paramsArray = inputs\n .filter(includeInput)\n .map((i) => ({ name: i.name, value: i.value }));\n\n const answers = mapParams(paramsArray);\n console.log(\”Form inputs after filtering and mapping\”, answers);\n\n // Work out which pet we are processing this for\n const pet_name = answers.pet_name;\n\n // Find the table row that matches this petname\n const expectedAnswers = findPetDetails(pet_name);\n\n // Mark the answers to the questions\n const results = markAnswers(questions, expectedAnswers, answers);\n\n // Are all questions answered?\n const questionIds = questions\n .filter((q) => q.type !== \”select\”)\n .map((q) => q.id);\n console.log(\”questionId\”, questionIds);\n const unanswerQuestionKeys = questionIds.filter((k) => !answers[k]);\n console.log(\”unanswerQuestionKeys\”, unanswerQuestionKeys);\n\n // Check which ones have the wrong answers\n const failedQuestionKeys = results.filter((r) => !r.pass);\n\n const all_answered = unanswerQuestionKeys.length == 0;\n const any_failed = failedQuestionKeys.length > 0;\n\n const resultsSummary = [];\n resultsSummary.push(`All questions answered? ${toYesNo(all_answered)}`);\n resultsSummary.push(`Any failed questions? ${toYesNo(any_failed)}`);\n results.forEach((r) => {\n resultsSummary.push(\n r.pass\n ? `${r.question} – ${r.answer}`\n : `${r.question} – ${r.answer} (NOT ACCEPTABLE)`\n );\n });\n displayResult(resultsSummary.join(\”\\n\”));\n\n return false;\n}\n\nfunction toYesNo(v) {\n return v ? \”Yes\” : \”No\”;\n}\n\nfunction markAnswers(questions, expectedAnswers, answers) {\n console.log(\n \”markAnswers; questions:%s expectedAnswers:%s answers:%s\”,\n questions,\n expectedAnswers,\n answers\n );\n const results = [];\n questions.forEach((question) => {\n const expected = expectedAnswers ? expectedAnswers[question.id] : undefined;\n const answer = answers[question.id];\n const pass = !expected || expected == answer;\n results.push({\n id: question.id,\n question: question.question,\n answer,\n expected,\n pass,\n });\n });\n console.log(\”markAnswers; results\”, results);\n return results;\n}\n\nfunction includeInput(i) {\n return i.name && ((i.type == \”radio\” && i.checked) || i.type != \”radio\”);\n}\n\nfunction displayResult(msg) {\n console.log(\”displayResult\”, msg);\n document.getElementById(\”questionaire_results\”).value =\n typeof msg === \”object\” ? JSON.stringify(msg, null, 2) : msg;\n}\n\nfunction mapParams(params) {\n const result = {};\n\n params.forEach((p) => {\n result[p.name] = p.value;\n });\n\n return result;\n}\n\nfunction fetchPetDetails() {\n return fetchFromGoogle(\n \”https://sheets.googleapis.com/v4/spreadsheets/1Bg9KglUeJn5qe0Y33l4bP-NCBOnwOCFRTZDURwpwv14/values/PetDetails?key=AIzaSyDDYvbBQK7kccJ3nEfBi6Uve9LD6jKOeW0\”\n );\n}\n\nfunction fetchQuestions() {\n return fetchFromGoogle(\n \”https://sheets.googleapis.com/v4/spreadsheets/1Bg9KglUeJn5qe0Y33l4bP-NCBOnwOCFRTZDURwpwv14/values/Questions?key=AIzaSyDDYvbBQK7kccJ3nEfBi6Uve9LD6jKOeW0\”\n );\n}\n\nfunction fetchFromGoogle(url) {\n console.log(\”fetch file from\”, url);\n return fetch(url)\n .then((response) => response.json())\n .then((body) => {\n const headers = body.values[0];\n const rows = body.values.slice(1);\n const tableRows = rows.map((row) => mapTableRowWithHeader(headers, row));\n return tableRows;\n })\n .catch((err) => {\n console.error(\”Fetch error\”, err);\n });\n}\n\nfunction mapStringAsId(id) {\n return id.replace(/[ \\.]/g, \”_\”);\n}\n\nfunction mapTableRowWithHeader(headers, row) {\n const result = {};\n headers.forEach((header, index) => {\n result[mapStringAsId(header)] = row[index];\n });\n return result;\n}\n\nfunction findPetDetails(petname) {\n const row = petDetails.find((v) => v[\”pet_name\”] == petname);\n return row;\n}\n\nfunction listPetNames() {\n return petDetails.map((p) => p.pet_name);\n}\n\nfunction fetchQuestionsAndAnswers() {\n return Promise.all([\n fetchPetDetails().then((data) => {\n petDetails = data;\n console.log(\”Pet details fetched\”, JSON.stringify(petDetails));\n return petDetails;\n }),\n fetchQuestions().then((data) => {\n questions = data;\n questions.forEach((q) => {\n if (q.id) {\n q.id = mapStringAsId(q.id);\n }\n });\n console.log(\”Questions fetched\”, JSON.stringify(questions));\n return questions;\n }),\n ]).then((results) => ({ petDetails: results[0], questions: results[1] }));\n}\n\nfunction inputChangeListener(event) {\n console.log(\”inputChangeListener; event\”, event);\n captureForm();\n}\n\nfunction addFormDetails() {\n console.log(\”Add inputs to form\”);\n const fieldSet = document.getElementById(questionaireElementId);\n\n const questionaireContainer = document.createElement(\”div\”);\n questionaireContainer.className = \”questionaire\”;\n fieldSet.appendChild(questionaireContainer);\n\n questions.forEach((q) => {\n // console.log(\”Add question to form\”, q);\n\n const questionContainer = document.createElement(\”div\”);\n questionContainer.className = \”questionaire-question\”;\n questionaireContainer.appendChild(questionContainer);\n\n const answerContainer = document.createElement(\”div\”);\n answerContainer.className = \”questionaire-answer\”;\n questionaireContainer.appendChild(answerContainer);\n\n const label = document.createElement(\”label\”);\n label.className = \”questionaire-question-label\”;\n label.id = q.id + \”_label\”;\n label.appendChild(document.createTextNode(q.question + \” \”));\n questionContainer.appendChild(label);\n\n switch (q.type) {\n case \”radio\”:\n q.options.split(\”,\”).forEach((o) => {\n console.log(\n \”Create radio button; question:%s option:%s\”,\n q.question,\n o\n );\n const optionId = q.id + \”_\” + o;\n\n const optionLabel = document.createElement(\”label\”);\n optionLabel.className = \”questionaire-option-label\”;\n optionLabel.appendChild(document.createTextNode(o));\n optionLabel.htmlFor = optionId;\n answerContainer.appendChild(optionLabel);\n\n const input = document.createElement(\”input\”);\n input.type = \”radio\”;\n input.id = optionId;\n input.name = q.id;\n input.value = o;\n input.oninput = inputChangeListener;\n answerContainer.appendChild(input);\n });\n break;\n case \”select\”:\n console.log(\”Create select; question:%s\”, q.question);\n const select = document.createElement(\”select\”);\n select.name = q.id;\n select.id = q.id;\n select.oninput = inputChangeListener;\n answerContainer.appendChild(select);\n\n // Create the default option\n const option = document.createElement(\”option\”);\n option.appendChild(document.createTextNode(\”Choose a value\”));\n option.id = \”default\”;\n option.value = \”\”;\n select.appendChild(option);\n\n q.options\n .split(\”,\”)\n .sort()\n .forEach((o) => {\n console.log(\”Create option; question:%s option:%s\”, q.question, o);\n const option = document.createElement(\”option\”);\n option.value = o;\n option.id = q.id + \”_\” + o;\n option.appendChild(document.createTextNode(o));\n select.appendChild(option);\n });\n break;\n case \”text\”:\n console.log(\”Create input; question:%s\”, q.question);\n const input = document.createElement(\”input\”);\n input.id = q.id;\n input.type = \”text\”;\n input.name = q.id;\n input.oninput = inputChangeListener;\n answerContainer.appendChild(input);\n label.htmlFor = q.id;\n break;\n }\n // fieldSet.appendChild(document.createElement(\”br\”));\n });\n}\n\nfunction workOutPetName() {\n const url = new URL(document.location.href);\n let petName = url.hash.replace(\”#\”, \”\”);\n console.log(\n \”Retrieved petName from hash as %s from %s\”,\n petName,\n document.location.href\n );\n\n if (!petName && document.referrer) {\n const referrer = new URL(document.referrer);\n petName = referrer.pathname\n .split(\”/\”)\n .filter((p) => p)\n .pop();\n console.log(\n \”Retrieved petName from referrer as %s from %s\”,\n petName,\n document.referrer\n );\n }\n return petName;\n}\n\nfunction initialiseApplicationForm() {\n return fetchQuestionsAndAnswers().then(() => {\n console.log(\n \”Populating form with questions; elementId:%s\”,\n questionaireElementId\n );\n addFormDetails();\n const petName = workOutPetName();\n if (petName) {\n console.log(`Selecting option for petName=${petName}`);\n\n const petDetails = findPetDetails(petName);\n console.log(\”petDetails to be used to default options\”, petDetails);\n if (petDetails) {\n console.log(\”questions to determine options to preselect\”, questions);\n\n questions.forEach((question) => {\n if (question.type === \”select\”) {\n console.log(\n \”Selection option to select default value for\”,\n question\n );\n const value = petDetails[question.id];\n console.log(\”Value to use for default\”, value);\n const select = document.getElementById(question.id);\n const optionId = question.id + \”_\” + value;\n const option = select.options.namedItem(optionId);\n if (option) {\n console.log(\”Setting option to selected\”, option);\n option.selected = true;\n // If we manage to select a default value then disable it so the user can’t change it\n select.disabled = true;\n }\n }\n });\n }\n }\n\n // Trigger an initial process of the inputs even though nothing has been input\n captureForm();\n });\n}\n\nfunction initialise(elementId) {\n questionaireElementId = elementId;\n console.log(\n \”Add Event listener for when dom is loaded; questionaireElementId:%s\”,\n questionaireElementId\n );\n document.addEventListener(\”DOMContentLoaded\”, initialiseApplicationForm);\n}\n\nmodule.exports = {\n captureForm,\n initialise,\n initialiseApplicationForm,\n workOutPetName,\n fetchQuestionsAndAnswers,\n findPetDetails,\n listPetNames,\n mapParams,\n markAnswers,\n};\n\n\n//# sourceURL=webpack://ApplicationForm/./src/application-form.js?”); /***/ }) /******/ }); /************************************************************************/ /******/ // The module cache /******/ var __webpack_module_cache__ = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ var cachedModule = __webpack_module_cache__[moduleId]; /******/ if (cachedModule !== undefined) { /******/ return cachedModule.exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = __webpack_module_cache__[moduleId] = { /******/ // no module.id needed /******/ // no module.loaded needed /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /************************************************************************/ /******/ /******/ // startup /******/ // Load entry module and return exports /******/ // This entry module is referenced by other modules so it can’t be inlined /******/ var __webpack_exports__ = __webpack_require__(“./src/application-form.js”); /******/ ApplicationForm = __webpack_exports__; /******/ /******/ })() ; ApplicationForm.initialise(‘questionaire’)