Issue with implementing css on custom plugin.

[haeman...@gmail.com]

I am fairly new to css and jquery and i am not uable to solve this issue.
I worte a plugin that shows a group of images and then asks some questions on them. A quiz styled plugin.

I am trying to align the images side by side but I have had no luck.
Any help would be appreciated.

Code for the plugin--

(function( $ ) {
//console.log('hello');
jsPsych["quizplugin"] = (function(){

var plugin = {};

plugin.create = function(params){

params = jsPsych.pluginAPI.enforceArray(params, ['choices','stim']);

var trials= [];
trials[0]={};
trials[0].question = params.question;
trials[0].stimtype = params.stimtype;
trials[0].stimuli = params.stim;
trials[0].choices = params.choices;
trials[0].answer = params.answer;

return trials;
};

plugin.trial = function(display_element, trial){
trial = jsPsych.pluginAPI.evaluateFunctionParameters(trial);

display_element.html(trial.question);
/*display_element.append('<br>');
display_element.append($('<img>', {
src: trial.stimuli,
id: 'quiz-plugin-stimlui'
}));*/
var stimnumber=trial.stimuli.length;
var rownumber= Math.round(Math.sqrt(stimnumber));


if(trial.stimtype=='v')
{
for(var i=0;i<trial.stimuli.length;i++){

display_element.append('<div ><iframe width="500" height="500" src='+trial.stimuli[i] +'></iframe><br></div>');
}
}
if(trial.stimtype=='i')
{
display_element.append('<div style="display:inline-block">');
for(var i=0;i<trial.stimuli.length;i++){

display_element.append('<img src='+trial.stimuli[i]+'>asdasdasdasdasd');

}
display_element.append('</div>');
}


display_element.append('<form class="form1">');

for (var i =0;i<trial.choices.length;i++)
{
display_element.append('<input type="radio" class="radio" > <label class="radio" val='+trial.choices[i]+'>'+trial.choices[i]+'</label><br>');

}
display_element.append('<input type="Submit" value="Submit" id="submit"></form>');


$('input[type="submit"]').click(function(){
var check = $('input[type="radio"]:checked + label');

alert("You Chose "+check.attr('val'));

if( check.attr('val') == trial.answer){
alert("You chose correctly");
}
else{
alert("Wrong choice");
}
display_element.html(''); // clear the display
// MUST ADD LINE TO SAVE DATA!
jsPsych.finishTrial();

});
};
return plugin;

})();
})(jQuery);

[Josh de Leeuw]

Hi,

Images should just appear side by side by default. Here's a jsfiddle example:

http://jsfiddle.net/LzezjLrw/

What kind of behavior are you seeing?

--Josh

--
You received this message because you are subscribed to the Google Groups "jsPsych" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspsych+u...@googlegroups.com.
To post to this group, send email to jsp...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/e3deade3-63b2-4bca-8ba5-f4aac0e88ef6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.