Здравствуйте!
Необходимо реализовать
drag n drop тест (когда есть картинка, на ней вырезаны области, и пользователю нужно вставить в эти области правильные варианты).
нужна рекомендация, как лучше сделать, мне пришло в голову лишь одно. Стандартный набор тэгов
html , т.е. главная картинка (в которой заглушки) ну и маленькие варианты ответов также через
<img>. Но я так понимаю можно же это через канвас реализовать, не знаю на сколько это проще будет. НО тем не менее однозначно будет объект с вопросом, по типу..
let question={
'question_type' : 'draggable',
'picture_url' : 'questions/questions_source/cut_cat.jpg',
'cutouts_size' : '100px', // размер картинки для варианта ответа (предполагается что варианты ответов будут квадратными
'cutouts_positions':[
[
'questions/questions_source/cat_cutted_el_1.jpg', // урл одного из вариантов ответов
'170.65px', // смещение для заглушки по оси x
'137.82px' // смещение для заглушки по оси y
],
[
'questions/questions_source/cat_cutted_el_2.jpg',
'69.53px',
'325.56px'
],
[
'questions/questions_source/cat_cutted_el_3.jpg',
'415.31px',
'247.78px'
],
]
};
В этом варианте встаёт резонный вопрос, что это получается хардкодинг, т.е. адаптивности при таком раскладе не возможно добиться. Что вы думаете по этому поводу? p.s.: я думал сделать сеткой, т.е. типа как пазл картинка состоящая из одинаковых квадратиков (тогда это будет проще) , НО мне нужны именно различные позиции в тех. схеме, которые могут соответственно быть в любом месте исходной картинки.
