Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

HTML/ JavaScript program for input

More
7 years 1 month ago #147871 by Spix
Hi.

For my study I want my participants to compose a simple music track. For this I made a little program with HTML/ JS. You can find it in the attachment.

Is there a way to use this program effective as a input for e.g. a textfield?



Alternatively I would have to direct the participants to another page, where they can compose and send them back to Limesurvey after they are done. I might lose some participants this way.

Greetings
Attachments:
The topic has been locked.
More
7 years 1 month ago #147936 by jelo
Replied by jelo on topic HTML/ JavaScript program for input
The contents of the html page can be transferred into a question text field or a boilerplate.
If you use groups in Limesurvey you can then put a hidden question (text oder equation) in the group which copies the result of the composing via javascript into the hidden answer field.

Haven't the code on you example. So I am not sure what will be the text result of the composing. But once you got the question recreated inside LimeSurvey I sure a few people in the forum can provide a helping hand with the result transfer.

The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
The topic has been locked.
More
7 years 1 month ago #148160 by Spix
Replied by Spix on topic HTML/ JavaScript program for input
Hi Jelo.

Thanks for your answer.

jelo wrote: Haven't the code on you example. So I am not sure what will be the text result of the composing.


What do you mean? Can't you open the attachment?

jelo wrote: The contents of the html page can be transferred into a question text field or a boilerplate.
If you use groups in Limesurvey you can then put a hidden question (text oder equation) in the group which copies the result of the composing via javascript into the hidden answer field.


Yes I use groups. How would this work exactly? I created a hidden question in the same group. I also have my JS added to the template.js and my HTML with the buttons into the question. It works theoretically, but I always get a 404 Error when I press a button.
The topic has been locked.
More
7 years 1 month ago #148832 by Spix
Replied by Spix on topic HTML/ JavaScript program for input
Does anybody have an idea?
The topic has been locked.
More
7 years 1 month ago #148835 by jelo
Replied by jelo on topic HTML/ JavaScript program for input
Since I haven't read your complete code, I only guessed that the result of the composing task is a textstring, which will be saved somewhere.

If you already have transferred the HTML/JS website into a LimeSurvey survey you might upload the result here in forum to get people to help you with the coding between JS and LimeSurvey.
Are you the coder of the original HTML/JS stuff?

To tell the forum that you get a 404 error won't bring anybody the insight which is needed.
You will maximize the chance of getting support with posting the survey (exported file and Demo URL) and posting the version/build of LimeSurvey used.

The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
The topic has been locked.
More
7 years 2 weeks ago #149432 by Spix
Replied by Spix on topic HTML/ JavaScript program for input
Hi Jelo.
Thanks for your help. I attached the question and the template (MCT.zip).

I am the coder but I learned HTML just for this, so I have no routine or background knowledge on programming apart the things I did in my code.

The body of the program is in the question, the head is in the question.pstpl in the template.

Is there any further information I should provide?
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 2 weeks ago #149444 by tpartner
Replied by tpartner on topic HTML/ JavaScript program for input
Among other problems I see, you can't arbitrarily insert <head> and <body> elements into an existing HTML page and this looks like an old template. What version of LimeSurvey are you using?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
7 years 2 weeks ago #149447 by Spix
Replied by Spix on topic HTML/ JavaScript program for input
Ok so I dont need the code to be between the usual <html>, <head>, <body> and <script> "braces"!?

I dont need anything in the template except the head of the program if it needs to be there. So where has the code to be in there? It loads the audio and initializes it.

It's Version 2.05+ Build 150310
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 2 weeks ago #149471 by tpartner
Replied by tpartner on topic HTML/ JavaScript program for input
As i mentioned, several problems.

Here is your survey back with the following changes:
  • Fixed the HTML in the question text.
  • Added type="button" attributes to buttons so they won't submit the page.
  • Removed the onclick attributes and added some data attributes to the buttons to facilitate jQuery click events.
  • Fixed some structural problems in startpage.pstpl.
  • In startpage.pstpl, commented out the inclusion of runOnce.js (there are errors in that script).
  • Move the JavaScript from question.pstpl to template.js and wrapped it in some conditions so it is only fired after page load and only if the id="Zahlenanzeige" element is found.
  • Added jQuery click events for the buttons.
  • Fixed a bug with pauses in the replay() function.
  • Added functions to load the data into the LimeSurvey input.

The HTML:
Code:
    <h1>Kompositionsaufgabe</h1>
    <br>
 
    <!-- ANZEIGE ----------------------------------------------------------------------------------------------------------------------->
 
    <p id="Zahlenanzeige" data-status="loading"></p>
 
    <!-- SCHALTER ---------------------------------------------------------------------------------------------------------------------->
    <button type="button" data-function="button-press" data-value="0">
        <img src="https://www2.uibk.ac.at/downloads/c7201049/mct/pause.png" alt="Pause" width="150" height="150">
    </button>
    <button type="button" data-function="button-press" data-value="1">
        <img src="https://www2.uibk.ac.at/downloads/c7201049/mct/button1.png" alt="Schaltfläche 1" width="150" height="150">
    </button>
    <button type="button" data-function="button-press" data-value="2">
        <img src="https://www2.uibk.ac.at/downloads/c7201049/mct/button2.png" alt="Schaltfläche 2" width="150" height="150">
    </button>
    <button type="button" data-function="button-press" data-value="3">
        <img src="https://www2.uibk.ac.at/downloads/c7201049/mct/button3.png" alt="Schaltfläche 3" width="150" height="150">
    </button>
    <button type="button" data-function="button-press" data-value="4">
        <img src="https://www2.uibk.ac.at/downloads/c7201049/mct/button4.png" alt="Schaltfläche 4" width="150" height="150">
    </button>
    <br>
    <br>
    <button type="button" data-function="replay">
        <img src="https://www2.uibk.ac.at/downloads/c7201049/mct/playbutton.png" height="50" width="50">
    </button>
    <button type="button" data-function="button-press" data-value="-1">Löschen</button>

The JavaScript:
Code:
$(document).ready(function() {
  if($('#Zahlenanzeige').length > 0) {
 
    // Identify some elements
    var thisQuestion = $('#Zahlenanzeige').closest('div[id^="question"]');
    var thisInput = $('input[type="text"]', thisQuestion);
 
    // Click events for buttons
    $('.questiontext button', thisQuestion).on('click', function(e) {
      if($(this).attr('data-function') == 'button-press') {
        buttonPress($(this).attr('data-value'));
      }
      if($(this).attr('data-function') == 'replay') {
        replay();
      }
    });
 
        // Variablen definieren
        var audio = new Audio(),
            srcList = [
                null,
                'https://www2.uibk.ac.at/downloads/c7201049/mct/a.mp3',
                'https://www2.uibk.ac.at/downloads/c7201049/mct/d.mp3',
                'https://www2.uibk.ac.at/downloads/c7201049/mct/g.mp3',
                'https://www2.uibk.ac.at/downloads/c7201049/mct/b.mp3'
            ],
            audioIndex = 1,
            timeoutReplay = 0,
            timeoutReplayPause = 500,
            zahlen = [];
 
 
        // Array zahlen abspielen
        function replay() {
            if (document.getElementById('Zahlenanzeige').dataset.status !== 'ready') {
                return;
            }
 
            if (typeof zahlen[audioIndex] !== 'undefined') {
                if (zahlen[audioIndex] == 0) {
                    audioIndex = audioIndex + 1;
                    setTimeout(replay, timeoutReplayPause);
                } else {
                    document.getElementById('Zahlenanzeige').dataset.status = 'playing';
                    audio.onended = null;
                    audio.src = srcList[zahlen[audioIndex]];
                    audio.onended = function () {
                        audioIndex = audioIndex + 1;
                        audio.onended = null;
                        document.getElementById('Zahlenanzeige').dataset.status = 'ready';
                        setTimeout(replay, timeoutReplay);
                    };
                    audio.play();
                }
            } else {
                audioIndex = 0;
                audio.onended = null;
                document.getElementById('Zahlenanzeige').dataset.status = 'ready';
            }
        }
 
        // Audio abspielen
        function playAudio() {
            document.getElementById('Zahlenanzeige').dataset.status = 'playing';
            audio.onended = null;
            audio.src = srcList[audioIndex];
            audio.onended = function () {
                audioIndex = 0;
                audio.onended = null;
                document.getElementById('Zahlenanzeige').dataset.status = 'ready';
            };
            audio.play();
        }
 
 
        // Schalter verarbeiten
        function buttonPress(value) {
            if (document.getElementById('Zahlenanzeige').dataset.status === 'ready') {
                switch (Number(value)) {
                case -1:
                    zahlen.pop();
                    document.getElementById("Zahlenanzeige").innerHTML = zahlen.join(' - ');
                    break;
                case 0:
                    audioIndex = value;
                    zahlen.push(value);
                    break;
                case 1:
                case 2:
                case 3:
                case 4:
                    audioIndex = value;
                    zahlen.push(value);
                    playAudio(value);
                    break;
                }
                document.getElementById('Zahlenanzeige').innerHTML = zahlen.join(' - ');
        thisInput.val(document.getElementById('Zahlenanzeige').innerHTML);
            }
        }
 
 
        // Audio Dateien laden
        audio.addEventListener('canplaythrough', preLoadAudio, false);
        function preLoadAudio() {
            if (typeof srcList[audioIndex] !== 'undefined') {
                audio.src = srcList[audioIndex];
                audioIndex = audioIndex + 1;
            } else {
                audioIndex = 0;
                document.getElementById('Zahlenanzeige').innerHTML = '';
        thisInput.val(document.getElementById('Zahlenanzeige').innerHTML);
                document.getElementById('Zahlenanzeige').dataset.status = 'ready';
                audio.removeEventListener('canplaythrough', preLoadAudio, false);
            }
        }
 
 
        // Initialisierung
        function init() {
            document.getElementById('Zahlenanzeige').innerHTML = 'Lade Audiodaten...';
            preLoadAudio();
 
            document.onkeydown = function(event) {
                var charCode = event.which || event.keyCode;
 
                switch (charCode) {
                    case 220:
                        buttonPress(0);
                        break;
                    case 49:              // 1
                        buttonPress(1);
                        break;
                    case 50:              // 2
                        buttonPress(2);
                        break;
                    case 51:              // 3
                        buttonPress(3);
                        break;
                    case 52:              // 4
                        buttonPress(4);
                        break;
                    case 32:              // spacebar
                        replay();
                        break;
                    case 8:              // backspace
                        buttonPress(-1);
                        break;
                }
            }
       }
 
        init();
  }
 
});

Survey and template attached:

File Attachment:

File Name: MCT_MODIFIED_TP.zip
File Size:33 KB

File Attachment:

File Name: limesurvey...5233.lss
File Size:14 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: Spix
The topic has been locked.
More
7 years 2 weeks ago #149488 by Spix
Replied by Spix on topic HTML/ JavaScript program for input
Thank you a thousand times for your time.
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 2 weeks ago #149521 by DenisChenu
Replied by DenisChenu on topic HTML/ JavaScript program for input
tparner must be an angel ;)

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
More
7 years 2 weeks ago #149550 by Spix
Replied by Spix on topic HTML/ JavaScript program for input
One other question. For a better overview I chose to have the array "Zahleneingabe" formated with dashes like this "1 - 2 - 3 - 4".
This is a problem because of the digit field. So I deleted the dashes in the template.js but they are still there.

Is the code a second time somewhere else? Or ist it possible to have the array saved and not having the participants enter the digits somewhere else?
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose