Для двух прямоугольников соедините две фигуры черной линией, расположите любые две фигуры на экране, используя html, css ⇐ CSS

[Anonymous]

I want to make the pair group function when I click on the first image, then click on the second image, they will be connected by a black line, the line starts from the right edge of the first image and the left edge of The second image is as sample above.

my code:

let answersChoosed = []; let questionList = []; let questionTest = {}; let locationAnswers = []; const QUESTION_TYPES = { RADIO: "RADIO", MULTI: "MULTI", MATCH: "MATCH", CONNECT: "CONNECT", TEXT: "TEXT", }; async function getQuestions() { const url = "https://monka.vn/api/test/7507"; const config = { method: "GET", }; try { const resp = await fetch(url, config); if (!resp.ok) return new Error("some thing went wrong!"); const data = await resp.json(); return data; } catch (err) { console.error(err.message); } } function answerTypeDragAndDrop(content) { let answer = document.createElement("div"); answer.classList.add("project-tasks-answers-answer"); answer.setAttribute("draggable", "true"); answer.innerHTML = content; return answer; } function answerTypeMultipleChoice(content) { // create answer type radio and text content let answer = document.createElement("div"); answer.className = "project-tasks-answers-multipleAnswer"; answer.innerHTML = ` ${content} `; return answer; } function answerTypeText() { // create answer type text let answer = document.createElement("input"); answer.className = "project-tasks-answers-textAnswer"; answer.type = "text"; return answer; } function answerTypeOneChoice(content) { // create answer type radio and text content let answer = document.createElement("div"); answer.className = "project-tasks-answers-oneChoice"; answer.innerHTML = ` ${content} `; return answer; } function answerTypeMatchingPair(content) { let answer = document.createElement("div"); answer.className = "project-tasks-answers-matchingPair"; answer.innerHTML = content; return answer; } function createQuestion(questionId, questionNumber) { let question = document.createElement("div"); question.className = "project-tasks-questionsList-question"; question.id = questionId; question.innerText = questionNumber; return question; } function submitBtn() { let submit = document.createElement("button"); submit.className = "project-tasks-questionsList-submit"; submit.innerText = "Submit"; return submit; } function createQuestionTitle(img) { // create question title let questionTitle = document.createElement("div"); questionTitle.className = "project-tasks-questionTitle"; questionTitle.innerHTML = img; return questionTitle; } function saveAnswerForOneChoice(answers, questionId, questionNumber) { Object.values(answers.children).map((answer) => { answer.addEventListener("click", (e) => { if (e.target.checked) { if (answersChoosed.find((item) => item.questionId === questionId)) { answersChoosed = answersChoosed.filter( (item) => item.questionId !== questionId ); } answersChoosed.push({ questionId: questionId, questionNumber: questionNumber, answer: e.target.value, }); } }); }); } function saveAnswerForMultipleChoice(answers, questionId, questionNumber) { Object.values(answers.children).map((answer) => { answer.addEventListener("click", (e) => { if (e.target.checked) { answersChoosed.push({ questionId: questionId, questionNumber: questionNumber, answer: e.target.value, }); } }); }); } function enableDragAndDrop() { var dragSrcEl = null; function handleDragStart(e) { // this.style.opacity = "0.1"; // this.style.border = "3px dashed #c4cad3"; dragSrcEl = this; e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/html", this.innerHTML); } function handleDragOver(e) { if (e.preventDefault) { e.preventDefault(); } e.dataTransfer.dropEffect = "move"; return false; } function handleDrop(e) { if (e.stopPropagation) { e.stopPropagation(); // stops the browser from redirecting. } // if (dragSrcEl != this) { // dragSrcEl.innerHTML = this.innerHTML; // this.innerHTML = e.dataTransfer.getData("text/html"); // } if (dragSrcEl != this) { // Swap HTML content let tempHTML = dragSrcEl.innerHTML; dragSrcEl.innerHTML = this.innerHTML; this.innerHTML = tempHTML; // Swap the name attribute let tempName = dragSrcEl.getAttribute("name"); dragSrcEl.setAttribute("name", this.getAttribute("name")); this.setAttribute("name", tempName); } return false; } function handleDragEnd(e) { this.style.opacity = "1 "; this.style.border = 0; } let items = document.querySelectorAll(".project-tasks-answers-answer"); items.forEach(function (item) { item.addEventListener("dragstart", handleDragStart, false); item.addEventListener("dragover", handleDragOver, false); item.addEventListener("drop", handleDrop, false); item.addEventListener("dragend", handleDragEnd, false); }); } window.addEventListener("load", async () => { // container let questionsNumber = document.querySelector(".project-tasks-questionsList"); let answers = document.querySelector(".project-tasks-answers"); let questionTitle = document.querySelector(".project-tasks-questionTitle"); const data = await getQuestions(); const { questions, ...others } = data; questionList = questions; questionTest = others; // show all question number questionList.map((q, index) => { const questionId = q.id; const questionNumber = index + 1; const questionType = q.type; const question = createQuestion(questionId, questionNumber); questionsNumber.appendChild(question); const choiceKeys = Object.keys(q).filter((key) => key.startsWith("choice")); if (index === 0) { question.classList.add("project-tasks-questionsList-question-active"); questionCurrent = q; // show answer follow question current printAnswer( questionType, answers, questionId, questionNumber, q, choiceKeys, questionTitle ); } question.addEventListener("click", (e) => { answers.innerHTML = ""; questionTitle.innerHTML = ""; // active question e.target.classList.add("project-tasks-questionsList-question-active"); // remove active class for other question const questions = document.querySelectorAll( ".project-tasks-questionsList-question" ); questions.forEach((question) => { if (question !== e.target) { question.classList.remove( "project-tasks-questionsList-question-active" ); } }); // show answer follow question current printAnswer( questionType, answers, questionId, questionNumber, q, choiceKeys, questionTitle ); }); }); let submit = submitBtn(); questionsNumber.appendChild(submit); }); function calculateDistance(x1, y1, x2, y2) { return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); } function printAnswer( questionType, answers, questionId, questionNumber, q, choiceKeys, questionTitle ) { if (questionType === QUESTION_TYPES.RADIO) { // show question title questionTitle.appendChild(createQuestionTitle(q.question)); for (let i = 0; i < q.option_count; i++) { let answer = answerTypeOneChoice(q[choiceKeys]); answers.appendChild(answer); } saveAnswerForOneChoice(answers, questionId, questionNumber); } else if (questionType === QUESTION_TYPES.MULTI) { // show question title questionTitle.appendChild(createQuestionTitle(q.question)); for (let i = 0; i < q.option_count; i++) { let answer = answerTypeMultipleChoice(q[choiceKeys]); answers.appendChild(answer); } saveAnswerForOneChoice(answers, questionId, questionNumber); } else if (questionType === QUESTION_TYPES.TEXT) { // show question title questionTitle.appendChild(createQuestionTitle(q.question)); // find input tag in class project-tasks-questionTitle let input = document.querySelector(".project-tasks-questionTitle input"); input.classList.add("project-tasks-answers-answer-textAnswer"); input.addEventListener("input", (e) => { console.log("run"); }); } else if (questionType === QUESTION_TYPES.MATCH) { // show question title questionTitle.appendChild(createQuestionTitle(q.question)); // get letter last of key const answerOptions = choiceKeys.map((key) => { return key.charAt(key.length - 1); }); for (let i = 0; i < q.option_count; i++) { const piece = document.createElement("div"); let answer = answerTypeDragAndDrop(q[choiceKeys]); answer.setAttribute("name", answerOptions); if (i % 2 === 0) { piece.classList.add("project-tasks-answers-answer-misPiece"); answer.appendChild(piece); } else { piece.classList.add("project-tasks-answers-answer-enouPiece"); answer.appendChild(piece); // answer.style.height = "120px"; } answers.appendChild(answer); } enableDragAndDrop(); } else if (questionType === QUESTION_TYPES.CONNECT) { // show question title questionTitle.appendChild(createQuestionTitle(q.question)); const answerOptions = choiceKeys.map((key) => { return key.charAt(key.length - 1); }); for (let i = 0; i < q.option_count; i++) { let answer = answerTypeMatchingPair(q[choiceKeys]); answer.setAttribute("name", answerOptions); // answer.setAttribute("active", "0"); if (i % 2 === 0) { answers.appendChild(answer); } else { answer.style.padding = "0"; answer.style.height = "120px"; answers.appendChild(answer); } answer.addEventListener("click", (e) => { // allow active and disable active for answer // if (e.target.getAttribute("active") === "0") { // e.target.setAttribute("active", "1"); // e.target.style.backgroundColor = "#f2f2f2"; // } else { // e.target.setAttribute("active", "0"); // // e.target.offsetParent.setAttribute("active", "0"); // e.target.style.backgroundColor = "white"; // } const name = e.target.getAttribute("name") || e.target.offsetParent.getAttribute("name"); if (locationAnswers.find((item) => item.name === name)) { locationAnswers = locationAnswers.filter( (item) => item.name !== name ); } else { locationAnswers.push({ name, x: e.clientX, y: e.clientY, width: e.target.offsetWidth, height: e.target.offsetHeight, }); } if (locationAnswers.length > 0 && locationAnswers.length % 2 == 0) { for (let i = 0; i < locationAnswers.length; i += 2) { // get location x of answer const x1 = locationAnswers.x; const x2 = locationAnswers[i + 1].x; // get location y of answer const y1 = locationAnswers.y; const y2 = locationAnswers[i + 1].y; const height1 = locationAnswers.height; const height2 = locationAnswers[i + 1].height; const point1 = height1 / 2; const point2 = height2 / 2; // caculate point mid of 2 answer const distance = calculateDistance(x1, y1, x2, y2); const line = document.createElement("div"); line.style.position = "absolute"; line.style.width = distance + "px"; line.style.height = "2px"; line.style.backgroundColor = "black"; line.style.left = x1 + "px"; line.style.top = y1 + "px"; line.style.transformOrigin = "0 0"; line.style.transform = `rotate(${ (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI }deg)`; // connect from point1 to point2 answers.appendChild(line); } } }); } } } :root { --bg: #ebf0f7; --header: #fbf4f6; --text: #2e2e2f; --white: #ffffff; --light-grey: #c4cad3; --tag-1: #ceecfd; --tag-1-text: #2e87ba; --tag-2: #d6ede2; --tag-2-text: #13854e; --tag-3: #ceecfd; --tag-3-text: #2d86ba; --tag-4: #f2dcf5; --tag-4-text: #a734ba; --purple: #7784ee; --green: #5d9c59; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } html { font-size: 62.5%; } body { color: var(--text); } @mixin display { display: flex; align-items: center; } .app { background-color: var(--bg); width: 100%; min-height: 100vh; } h1 { font-size: 30px; } .project { padding: 2rem; max-width: 85%; width: 100%; margin: 0 auto; display: flex; align-items: start; justify-content: space-between; font-size: 1.6rem; .project-tasks { /* display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; grid-column-gap: 1.5rem; */ width: 50%; .project-tasks-questionTitle { } .project-questionTest { width: 50%; padding: 0 1rem 0 0; } .project-tasks-questionsList, .project-tasks-answers { display: flex; align-items: center; } .project-tasks-questionsList { margin: 0 0 1.8rem 0; .project-tasks-questionsList-question, .project-tasks-questionsList-submit { padding: 1rem 1.5rem; background-color: var(--white); margin: 0 0.5rem; border-radius: 0.5rem; cursor: pointer; } .project-tasks-questionsList-submit { background-color: var(--tag-2-text); color: var(--header); border: none; outline: none; } .project-tasks-questionsList-question-active { background-color: var(--text); color: var(--header); } } .project-tasks-answers { width: 100%; flex-wrap: wrap; margin-top: 1.5rem; .project-tasks-answers-answer { cursor: move; background-color: var(--white); padding: 1.2rem; border-radius: 0.8rem; width: calc(50% - 1rem); border: 3px dashed transparent; margin: 0 0.5rem 1rem; position: relative; box-shadow: rgba(99, 99, 99, 0.1) 0rem 0.2rem 0.8rem 0rem; border: 3px dashed transparent !important; display: flex; align-items: center; justify-content: center; &:hover { box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px; border: 3px dashed var(--light-grey) !important; } .project-tasks-answers-answer-misPiece { width: 1.4rem; height: 1.4rem; position: absolute; top: 50%; right: -0.8rem; transform: translate(0, -50%); background-color: var(--bg); border-radius: 3rem; } .project-tasks-answers-answer-enouPiece { width: 1.4rem; height: 1.4rem; position: absolute; top: 50%; left: -0.8rem; transform: translate(0, -50%); background-color: var(--white); border-radius: 3rem; } } .project-tasks-answers-oneChoice, .project-tasks-answers-multipleAnswer { background-color: var(--white); border-radius: 0.8rem; width: 100%; margin-bottom: 1rem; box-shadow: rgba(99, 99, 99, 0.1) 0rem 0.2rem 0.8rem 0rem; display: flex; align-items: center; padding: 0 1rem; } .project-tasks-answers-oneChoice:hover, .project-tasks-answers-multipleAnswer:hover { box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px; border-color: rgba(162, 179, 207, 0.2) !important; background-color: var(--green); color: var(--bg); } .project-tasks-answers-oneChoice-label, .project-tasks-answers-multipleAnswer-label { width: 100%; display: block; cursor: pointer; padding: 1.2rem; } .project-tasks-answers-answer > img, .project-tasks-answers-matchingPair > img { width: 50%; height: 50%; object-fit: contain; } .project-tasks-answers-matchingPair { background-color: var(--white); padding: 1.2rem; border-radius: 0.8rem; width: calc(50% - 8rem); margin: 0 8rem 1rem 0; position: relative; box-shadow: rgba(99, 99, 99, 0.1) 0rem 0.2rem 0.8rem 0rem; display: flex; align-items: center; justify-content: center; } } .project-tasks-answers-answer-textAnswer { border: none; outline: none; padding: 0.5rem; width: 5rem; border-radius: 0.5rem; } .project-tasks-answers-matchingPair-active { transform: scale(1.05); transition: all 0.3s ease; background-color: var(--green) !important; color: var(--white); } } } Document question test dispplay here

(In question 5, I want to group the images together, using regardless of div or svg)


Источник: https://stackoverflow.com/questions/780 ... 2-shapes-o