Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Assistance with project (Is this possible?)

A

awass024

New Coder
Hi everyone,
I am brand new to coding in HTML, CSS, and JS.

I have been trying to search for examples that are similar to a project I would like to create. My project uses drag and drop functionality to place randomized text from a list on a location of an image.
A good example is if you had a picture of a skeleton and random bone names to drag to where they belong on the skeleton. If the placement is correct, the name will stay in it's location, but if it's incorrect, it goes back to the randomized list. Once everything is in the correct location, a message pops up and a retry button appears as well.
There are some similar drag and drop matching games and tutorials that I have tinkered with over the last couple of weeks, but I have not seen anything that allows an item or text to be dropped on top of an image with specific drop locations like I have. Everything this seems to be linear or gridded.

Is this possible with HTML, CSS, and JS or do I need to find another way of creating my project. The end result must be completely standalone and run in a web browser, which is why I thought this would be the best method.

Thanks in advance.
 
Last edited by a moderator:
Sort by date Sort by votes
Thank you for the video recommendation. I like the way that the boxes drag and drop in the video, but it doesn't show how they can be dropped in a non-linear way on top of an image. An example of my image would be like the one I have attached, but ideally the white boxes would be right on top of the area to drag the text containers on without a line connecting it. My text containers would either be in a "word bank" or appear one at a time in random order in the center of the screen. My final project will be using a 2D map instead of a skeleton, but the same principles apply. This project I found is very similar to what I am looking to do, but everything must be self contained locally. Mine would use street names and places of interest instead of country names and shapes. http://techslides.com/demos/d3/dragdrop-geo-game.html
 

Attachments

  • skeleton.png
    skeleton.png
    8.1 KB · Views: 1
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom