<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:complete',function() {
 
    var mynumber=$('#question{QID} input[type="text"]').val();
 
    Papa.parse("https://www.myserver.de/test.csv", {
        download: true,
        header: true,
        skipEmptyLines: true,
        complete: function(results) {
                for (i=0; i < results.data.length; i++) {
                      if (results.data[i].number==mynumber) {
 
// Do something , e.g. use your script to change from 6- to 13-digits
 
                          break;
                      }
                }
    }
     });
  });
</script>

<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">/* Button */
    #verifyButton {
        background-color: #008AF2;
        color: white;
        padding: 12px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 2px 1px;
        cursor: pointer;
        border: none;
        border-radius: 5px;
    }
 
    /*Hover-Effect */
    #verifyButton:hover {
        background-color: #0070C0;
    }
 
    /* window */
    #verificationModal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        height: 400px;
        background-color: white;
        border: 1px solid #ccc;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        text-align: center;
    }
 
    /* Overlay */
    #overlay {
        display: none;
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }
 
    /* green checkmark */
    .green-checkmark {
        color: green;
        font-weight: bold;
    }
 
    /* privacy policy */
    #privacyPolicy {
        color: #0070C0;
        cursor: pointer;
    }
 
    /* close button */
    #closeButton {
        position: absolute;
        top: 10px;
        right: 10px;
        background: transparent;
        border: none;
        font-size: 20px;
        cursor: pointer;
    }
</style>
<p>Please verify yourself.</p>
 
<p><button id="verifyButton" onclick="showVerificationModal()">to the verification</button></p>
<!-- Overlay for the modal window -->
 
<div id="overlay"> </div>
<!-- modal window-->
 
<div id="verificationModal"><button id="closeButton" onclick="returnToSurvey()">✖</button><!-- close button -->
 
<h3>Verification</h3>
 
<div><label for="lastName">last name:</label> <input id="lastName" pattern="[A-Za-z]+" placeholder="last name" required="" type="text" /></div>
 
<div><label for="businessNumber">business number:</label> <input id="businessNumber" pattern="[0-9]{7}" placeholder="business number" required="" type="text" /></div>
 
<p>Please enter your 7-digit number.</p>
 
<div><input id="privacyCheck" required="" type="checkbox" /> <label for="privacyCheck">I accept the <span id="privacyPolicy" onclick="openPrivacyPolicy()">Privacy Policy</span></label></div>
<button onclick="verify()">Verify</button>
 
<p id="verificationStatus"> </p>
<!-- Status of verification --><!-- Return button, which is only displayed if verification is successful --><button id="returnButton" onclick="returnToSurvey()" style="display: none;">Return to the survey</button></div>
<script type="text/javascript">
    // database-some test data
    const database = {
        "Kamen": "1234567",
        "Strauss": "2345678",
        "Keil": "3456789",
        "Zeffi": "4782975"
    };
 
    // Function to display the modal window
    function showVerificationModal() {
        document.getElementById('overlay').style.display = 'block';
        document.getElementById('verificationModal').style.display = 'block';
    }
 
    // Function to open the privacy policy
    function openPrivacyPolicy() {
        window.open('https://www.privacypolicy.com', '_blank');
    }
 
    // Verification function
    function verify() {
        const lastNameInput = document.getElementById('lastName').value;
        const businessNumberInput = document.getElementById('businessNumber').value;
        const privacyChecked = document.getElementById('privacyCheck').checked;
 
        // Check whether the surname is in the database and whether the number matches
        if (privacyChecked) {
            if (database[lastNameInput] === businessNumberInput) {
                document.getElementById("verificationStatus").innerHTML = "<span class='green-checkmark'>&amp;#10004; Verifiziert!</span>";
 
                // The company number is inserted into all text fields here - want to change this!!!!!!!!!!!!!!
                const inputFields = document.querySelectorAll('input[type="text"]');
 
                inputFields.forEach(field => {
                    field.value = businessNumberInput; // Insert the number in each text field - change this !!!!!!!!!!!!!!!
                });
 
                // Show return button
                document.getElementById('returnButton').style.display = 'inline-block';
            } else {
                document.getElementById("verificationStatus").innerHTML = "<span style='color:red;'>&amp;#10008; Verification failed!</span>";
                document.getElementById('returnButton').style.display = 'none'; // Hide return button
            }
        } else {
            document.getElementById("verificationStatus").innerHTML = "<span style='color:red;'>&amp;#10008; Please accept the privacy policy!</span>";
            document.getElementById('returnButton').style.display = 'none'; // Hide return button
        }
    }
 
    // Function to return to the survey
    function returnToSurvey() {
        document.getElementById('overlay').style.display = 'none';
        document.getElementById('verificationModal').style.display = 'none';
        document.getElementById('returnButton').style.display = 'none'; // Hide return button
    }
 
    // Closes the modal window when the overlay is clicked
    document.getElementById('overlay').onclick = function () {
        returnToSurvey();
    }
</script>