ChoiceManager with images

[a.st...@gmail.com]

Hi Stefano,

Would it be possible to populate the ChoiceManager widget with images (.png) instead of texts? I'm trying to offer participants the option of selecting an avatar that they can use during the game.

Best,

Arjen 

[Can Çelebi]

Dear Arjen,

I am not sure if this is the correct answer or there can be multiple solutions hence do not know if this is the optimal one but I used the 'render' program option of the choice widget to add png images to a multiple choice question. In this case it was crypto token text and above them their png icon for each choice. Here is the render code that I added as an additional object to the choice object

            // renderer: function(td, choice,  idx) {
            //
            //     let myPath = '../../coinIcons/' + choice + '.png';
            //     let myChoiceDiv = '<div class=coinImgTextWrap><span class="coinImgWrap"><img class=coinImg src="' +
            //     myPath + '"/></span><span class="coinText">' + choice + '</span></div>';
            //
            //     // let myChoiceDiv = '<div class=coinImgTextWrap><img class=coinImg src="' +
            //     // myPath + '" alt="' + choice + '"/><span class="coinText">' + choice + '</span></div>';
            //
            //
            //     td.innerHTML = myChoiceDiv;
            //
            // }

We later on ended up not using this code as we had to account for multiple languages for the same question and made this rendering at an other file but this may give you a starting idea on how you can solve your problem.

Best,

Can

--
You received this message because you are subscribed to the Google Groups "nodeGame" group.
To unsubscribe from this group and stop receiving emails from it, send an email to nodegame+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/nodegame/d068dce5-9cc8-49cd-ae47-15694bc1e0b6n%40googlegroups.com.

[Stefano Balietti]

Hi Arjen, hi Can,

I think you are referring to the choices inside a ChoiceTable-like widget. My favorite approach consists in splitting value and display options.

You can specify them as an array:

 choices: [
                [

                    // Value.
                    'increase', 

                    // Display.
                    `<div style="float: left"><img style="margin: 20px; max-height: 60px" src="/arrows/up2.png"></div><div><strong>Increase inequalities</strong>`
                ],

                ...

]

or as an object:

 choices: [
                {

                    // Value.
                    value: 'increase', 

                    // Display.
                    display: `<div style="float: left"><img style="margin: 20px; max-height: 60px" src="/arrows/up2.png"></div><div><strong>Increase inequalities</strong>`
                },

                ...

]

Cheers,

Stefano

To view this discussion on the web visit https://groups.google.com/d/msgid/nodegame/CAJ%2BQh%3D4G7jSnW66ej5h7%3DH0nz-Tr4vvjB2o_%3DxBEqRxyMz7x%2BA%40mail.gmail.com.

[Arjen Stolk]

Thanks for the swift responses, both. Inserting the divs directly into the choicetable did the job for me.

Best,

Arjen

To view this discussion on the web visit https://groups.google.com/d/msgid/nodegame/CAMSNNMmWtpUPCE%2B_fa8_zk5ZxFfCrf-v3UQ43XFysg9qRhm1Vw%40mail.gmail.com.