I am trying to develop a survey question with a “drag and drop” where the respondent will be given a set of 3 randomized images and a list of 3 items to drop it into. We would like 3 images to be randomly chosen from the 254 images we have uploaded in the graphics library for every question.
Additionally, we’ve managed to understand we may use a block of questions and add a randomizer.
However, using the blocks we must manually create each question and manually upload the image ourselves from the graphics library and this only randomly assigns a block or version of the survey to each respondent. To achieve the type of randomization we would like to attain, we need 3 randomly chosen or randomly generated from the full set of 254 images each time it is presented as a question on the survey. Is there a way to get this random image generator type feature embedded into the survey?
I have been watching videos on how to create an random image generator and wondering if I can somehow embed that into the survey where it will work with the pick,group, rank. Thank you! Any feedback is appreciated or any ideas.
Related
First thank you for reading and in advanced for answering.
I am in the process of creating a message board based canine role-playing game. I'm researching and practicing and creating first drafts. So far I have everything I need for the map, forum, front end. I'm using html, css, js, and php. I have hosting with a database and I've been able to successfully create a database, call and input data.
So the part I'm stuck with trying to learn is the character creation page. I want users to be able to customize an image of a canine I've drawn by choosing a base coat color, eye color, and skin color from a drop down each and then that reflect on the image. Then to be able to further make the canine unique by adding markings. I've explored SVGs and it's just not what I want to do, unless it's the only way? But I still don't understand how to make the dropdown and adding/changing opacity of layer (marking) reflect on the image and save as a new image to the website.
So in short, can someone point me in the direction or show me a small example on how to make dropdowns and adding layers to reflect on an image? I really really hope this makes sense!
QUESTION: How can I load in 1 to 9 random images from a file containing hundreds of other images with JavaScript?
Just wanted to know if anyone here has any ideas for me. Because in the example below I am having trouble finding out how this website does it.
Thanks for the help.
example here
If each pokemon is an object with multiple properties (type, stats, etc), one of those properties were "imageid", you could use Math.random or a similar method to generate a random number between 1 and x, where x is your total number of images. Then a for...in loop to find the pokemon with the corresponding imageid, and display the appropriate image.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
A while ago I had created a small system that would allow one to select various images to use in a forum signature that were all designed to fit together (see example image below). This is currently done by having a series of images that get referenced by their names, which folder they're in, and suffixes in the image names.
I would like to create a system where one could modify these all they wanted. I tried looking up a few different ways to do it, however was unsuccessful in finding any way that would be able to do what I'm aiming to do here.
The original images are made in Photoshop and separated into individual layers based on the type of banner. Ideally I'd love to make a system that would allow one to modify the colours (RGB, slider, something like that), change the icon either by a set of preset icons or uploading their own, and the ability to modify the text on the images.
After all is said and done, I'd like the image pieces to be downloadable so they're not stored server-side. In addition I'd like to do this without having to export every variation possible, since that's already a nuisance with the current way it's doing things.
TL;DR:
Is there any way a user could modify a set of parameters to change colours, icons, or text, then download the result as a PNG? Code type does not matter, I'm willing to learn, just want to know the right direction.
Here's a download of the current code for anyone interested.
https://dl.dropboxusercontent.com/u/90098446/website.zip
Example Image (ignore the white lines):
Seems like each banner has four layers: banner, icon, text, and optional tears.
Save the individual layers and assemble them via javascript on the front-end. Arranging the parts as sprite sheets may make this more convenient both for editing in Photoshop and for assembling programmatically.
When the user wants to download the results, send a description of the assembly to the back-end, have the back-end assemble the parts into an image, and offer the image for download.
Rather than manually assembling each possibility in Photoshop, you instead let the system assemble it on demand.
I have actually done something like this. You need to use a canvas in your HTML and to have a finite number of possible images or possibly some Javascript functions to draw the thing the user wants. Those images/functions should be put together in your canvas to enable the user to preview what is his picture and a control set to change things.
This SO post shows you how you can get a png from a canvas. I suggest that you should have a save button, where the user finalizes the picture and this should send the picture to the server, where it will be stored. The download feature should download that picture.
I have done this differently. I have used canvas as a preview and when the user finalized the settings, those were sent to the server as JSON where the final picture was put together.
So I'm working an a little game that is online. It's a probability game and I'd like to have a few slides that have information and then the actual game. I'm using html & javascript to make the game and then css (which I don't know yet) to make it look better.
How would I go about creating different pages, should I just have an image and then make it opaque when I don't need it and then show another one over it?
The reason I'm asking is because I'm sure there is a much better way to do this but don't know how because I'm new to web coding.
you can make two separated pages.
contain the images one after another .. first image will have JS onclick .. on this function you will hide this image and show the other image
second image will be treated like link to the game page.
I'm seeing in another forum if the best way to do this is with Javascript or Ajax but I'm wondering if there is an even easier simpler way. I'm trying to create a web service where users can check which countries they have visited from a list of 175 or so and a World map image would then instantly update with a filled color.
There are other similar services, but I'm envisioning mine to be both updating from checks in checkboxes and by clicking on the target country in the displayed image say with an imagemap. Additionally other solutions display all the visited countries in the same color. I would like different colors for different countries or at least for those countries that touch. Eventually I would like to include a feature that enables the choice of which colors to assign countries.
I found a Sourceforge project called pwmfccd. It's simply an open source image of the world and the coordinates on the PNG image for all the countries. You can use mogrify from ImageMagick and floodfill to fill the countries with color. I have done this successfully, locally with batch files.
My ISP has told me where mogrify is located, basically "/usr/bin/mogrify". I now have a horrendously complicated cgi script which if it worked is set to redraw the world map image with each checkbox. It's here. It also redraws the whole web page with each check. The web page starts here. Of course this is not at all efficient, and I think probably the real way to go is Ajax or Javascript, so that maybe just the image gets changed and redrawn, not the whole web page. Sorry I don't even know the difference between Javascript and Ajax and their relative merits at this point.
I suppose you could make just one part of the image update with each check or click on the image instead of even just the image redrawing, but I have never even heard of a hint at being able to do that for irregularly shaped image elements like countries. So I guess an Image map and sister checkbox entries tied to mogrify events redrawing the user's personal copy of the image with an image refresh would be the only way to go.
So how do you do this with something other than Javascript or Ajax or is that definitely the way to go and if so, how would you do it? Or can you after all cut up a web based image into irregular puzzle shaped piece which you can redraw individually at will.
Thanks in advance for reading and considering answering this post.
Well, it looks like maybe my hosting company only supports using PHP with ImageMagick. At least I know better what to try create. I'm completely new to PHP, but I guess that is alright