2023-08-20 16:23:04 +02:00
<!DOCTYPE html>
<!-- This site was created in Webflow. https://www.webflow.com -->
<!-- Last Published: Mon Aug 14 2023 08:14:49 GMT+0000 (Coordinated Universal Time) -->
2023-08-20 16:35:24 +02:00
< meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >
2023-08-21 17:31:05 +02:00
< meta charset = "utf-8" >
2023-08-21 02:15:11 +02:00
< title > G1 Financement Quadratique !< / title >
2023-08-20 16:44:41 +02:00
< meta content = "Le Quadratic Funding (QF) est un mécanisme de financement par la foule qui amplifie les ressources disponibles en invitant les membres de la communauté à faire des dons (petits ou grands) qui agissent comme des votes sur l'affectation des fonds. Plus le soutien est large, plus la contrepartie est importante !" name = "description" >
< meta content = "G1 Finanacement Quadratique" property = "og:title" >
< meta content = "Le Quadratic Funding (QF) est un mécanisme de financement par la foule qui amplifie les ressources disponibles en invitant les membres de la communauté à faire des dons (petits ou grands) qui agissent comme des votes sur l'affectation des fonds. Plus le soutien est large, plus la contrepartie est importante !" property = "og:description" > < meta content = "https://uploads-ssl.webflow.com/649310f4afac55816ade84fd/64b3d63632dbf85fa5628483_wtf-og.png" property = "og:image" >
< meta content = "G1 Finanacement Quadratique" property = "twitter:title" >
< meta content = "Le Quadratic Funding (QF) est un mécanisme de financement par la foule qui amplifie les ressources disponibles en invitant les membres de la communauté à faire des dons (petits ou grands) qui agissent comme des votes sur l'affectation des fonds. Plus le soutien est large, plus la contrepartie est importante !" property = "twitter:description" > < meta content = "https://uploads-ssl.webflow.com/649310f4afac55816ade84fd/64b3d63632dbf85fa5628483_wtf-og.png" property = "twitter:image" > < meta property = "og:type" content = "website" > < meta content = "summary_large_image" name = "twitter:card" > < meta content = "width=device-width, initial-scale=1" name = "viewport" > < meta content = "Webflow" name = "generator" >
2023-08-20 16:35:24 +02:00
< link href = "WTF%20is%20Quadratic%20Funding%20_fichiers/wtf-is-qf-v2.webflow.3b5916333.css" rel = "stylesheet" type = "text/css" >
< script src = "WTF%20is%20Quadratic%20Funding%20_fichiers/cwn8dxb.js" type = "text/javascript" > < / script >
< style >
2023-08-20 16:23:04 +02:00
.matchingAmount,
.projectTable,
.addProjectCopyURL {
margin-bottom: 20px;
}
#projectTable {
width: 100%;
border-collapse: collapse;
}
#projectTable th,
#projectTable td {
border: 1px solid #ddd;
padding: 10px;
}
/* Rounded corners for the first cell */
#projectTable tr:first-child th {
border-radius: 10px;
background: linear-gradient(to bottom, #22239F, #8586D6);
color: white;
}
/* Red background for the last column title cell */
#projectTable tr:first-child th:last-child {
background: linear-gradient(to bottom, #AC3600, #D26939) !important;
color: white;
}
#projectTable th {
background-color: #f2f2f2;
text-align: left;
}
.contributionTag {
display: inline-block;
background: #000;
margin: 5px;
padding: 1px 8px;
border-radius: 5px;
color: white;
}
.contributionTag button {
font-size: 8px;
margin-left: 5px;
}
#addProject,
#copyURL {
padding: 10px 20px;
font-size: 16px;
}
input {
padding: 5px;
font-size: 16px;
width: 95%;
background-color: white; /* White background color */
border: none; /* Remove borders */
border-radius: 10px; /* Rounded corners */
}
button.removeProject {
font-size: 14px;
width: 100%;
height: 100%;
border: 0;
padding: 10px;
background-color: transparent;
color: #C74D16;
/* font-weight: 100; */
}
input#matchAmount {
font-size: 40px;
width: auto;
max-width: 250px;
background-color: white; /* White background color */
border: none; /* Remove borders */
border-radius: 10px; /* Rounded corners */
padding: 10px; /* Additional padding */
}
label {
font-size: 20px;
margin-bottom: 10px;
}
button.removeContribution {
border: none;
background-color: transparent;
font-size: 12px;
color: white;
cursor:pointer;
}
/* TABLE LINES */
#projectTable {
border-collapse: separate;
border-spacing: 0;
}
#projectTable th,
#projectTable td {
padding: 10px;
}
#projectTable th:first-child,
#projectTable td:first-child {
border-left: none;
}
#projectTable th {
background-color: #f2f2f2;
text-align: left;
}
#projectTable tr:first-child th {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#projectTable tr:not(:first-child) td {
border-bottom: 2px solid white;
}
#projectTable td {
border: none; /* Remove vertical borders */
}
< / style >
< / head >
< body >
< div class = "section fit interactive" >
< div class = "container" >
< div data-w-id = "0ab53c30-d57f-0722-984a-f1ac8c755abb" style = "opacity: 1; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;" class = "heading h5" > Outil de Financement Quadratique< / div >
< div id = "w-node-_042829df-342f-0d5c-6e00-cb385f836fa9-6ade8509" class = "w-layout-layout quick-stack-5 wf-layout-layout" >
< div id = "w-node-_042829df-342f-0d5c-6e00-cb385f836faa-6ade8509" class = "w-layout-cell" >
< div data-w-id = "1d38072a-7163-a160-8503-dc367e1f4e05" style = "opacity: 1;" class = "paragraph" >
< strong > 01.< / strong > < br >
< / div >
< div data-w-id = "2d305a5b-8d7d-4e56-bd09-41b56367d19c" style = "opacity: 1;" class = "paragraph" > Ajouter n'importe quel nombre de projets< br >
< / div >
< / div >
< div id = "w-node-_042829df-342f-0d5c-6e00-cb385f836fab-6ade8509" class = "w-layout-cell" >
< div data-w-id = "7b7890c6-e9a3-980a-c870-2bfff85971b8" style = "opacity: 1;" class = "paragraph" >
< strong > 02.< / strong > < br >
< / div >
< div data-w-id = "d488a91b-dc5e-78ea-c6b7-be9df21f8f6a" style = "opacity: 1;" class = "paragraph" > Ajouter des contributions différentes (essayer des montants totaux similaires et des nombres différents de dons)< br >
< / div > < / div > < div id = "w-node-d0d9ab88-ea17-bcf6-fd7c-30b951534ba1-6ade8509" class = "w-layout-cell" >
< div data-w-id = "4f477589-8a4f-4572-2261-3d93f69dcf55" style = "opacity: 1;" class = "paragraph" >
< strong > 03.< / strong > < br >
< / div > < div data-w-id = "23cdb603-afc2-5e21-762a-47dcd0771b50" style = "opacity: 1;" class = "paragraph" > Modifiez les chiffres pour voir les montants correspondants changer< br >
< / div > < / div > < / div > < / div >
< div class = "container" >
< div data-w-id = "694ebedd-7918-fea5-2c6a-ee50a3290a65" style = "opacity: 1;" class = "w-embed w-script" >
< script src = "WTF%20is%20Quadratic%20Funding%20_fichiers/jquery.min.js" > < / script >
< div id = "calculation" >
< / div >
< script >
$(document).ready(function () {
let quadraticFunding = {
2023-08-20 16:44:41 +02:00
matchAmount: 0, // Total match amount per round
2023-08-20 16:23:04 +02:00
projects: [],
};
// Update URL parameters on changes
function updateUrl() {
let params = new URLSearchParams();
params.set("match", quadraticFunding.matchAmount);
quadraticFunding.projects.forEach((project, i) => {
params.append("grant", project.contributions.join("-"));
});
// Update the URL only if it differs from the current state
if (window.location.search !== "?" + params.toString()) {
window.history.replaceState({}, "", "?" + params.toString());
}
}
let matchAmountInput = $("< input > ")
.attr("id", "matchAmount")
.attr("placeholder", "Match Amount")
.attr("value", quadraticFunding.matchAmount)
.attr("class", "matching-input");
let addProjectButton = $("< button > ")
.attr("id", "addProject")
.attr("class", "button")
.text("Add Project");
let copyURLButton = $("< button > ")
.attr("id", "copyURL")
.attr("class", "button")
.text("Copy URL");
let projectTable = $("< table > ").attr("id", "projectTable");
$("#calculation").append(
$("< div > ")
.addClass("matchingAmount")
2023-08-20 16:35:24 +02:00
.append("< label > Montant Total (Ğ1)< / label > ")
2023-08-20 16:23:04 +02:00
.append(matchAmountInput),
$("< div > ").addClass("projectTable").append(projectTable),
$("< div style = 'display: flex;' > ")
.addClass("addProjectCopyURL")
.append(addProjectButton)
.append(copyURLButton)
);
$("#projectTable").append(
$("< tr > ").append(
$('< th colspan = "2" > ').text("Project"),
$("< th > ").text("Contributions"),
$("< th > ").text("Funded Amount"),
$("< th > ").text("Match Amount"),
$("< th > ").text("Remove")
)
);
// Add copy URL functionality
$("#copyURL").on("click", function () {
let url = window.location.href;
let $temp = $("< input > ");
$("body").append($temp);
$temp.val(url).select();
document.execCommand("copy");
$temp.remove();
});
$("#addProject").on("click", function () {
let projectName = "Project #" + (quadraticFunding.projects.length + 1);
if (projectName) {
quadraticFunding.projects.push({
name: projectName,
contributions: [],
fundedAmount: 0,
matchAmount: 0,
});
let projectRow = $("< tr > ")
.attr("data-project-name", projectName)
.append(
$("< td > ").text(projectName),
$("< td > ").append(
$("< input > ")
.addClass("contributionInput")
.attr("placeholder", "Add a contribution and press Enter")
),
$("< td > ").attr("class", "contributions"),
$("< td > ").attr("class", "fundedAmount").text(0),
$("< td > ").attr("class", "matchAmount").text(0),
$("< td > ").append(
$("< button > ").addClass("removeProject").text("\u2716")
)
);
$("#projectTable").append(projectRow);
}
});
$("#projectTable").on("click", ".removeProject", function () {
let projectName = $(this).closest("tr").data("projectName");
quadraticFunding.projects = quadraticFunding.projects.filter(function (
project
) {
return project.name !== projectName;
});
$(this).closest("tr").remove();
calculateMatchAmounts();
});
$("#projectTable").on("keypress", ".contributionInput", function (e) {
if (e.which === 13) {
let contribution = parseFloat($(this).val());
let projectName = $(this).closest("tr").data("projectName");
let project = quadraticFunding.projects.find(function (project) {
return project.name === projectName;
});
if (project & & !isNaN(contribution)) {
project.contributions.push(contribution);
project.fundedAmount += contribution;
calculateMatchAmounts();
let contributionTag = $("< div > ")
.addClass("contributionTag")
.append($("< span > ").text("(Ğ1) " + contribution))
.append(
$("< button > ").addClass("removeContribution").text("\u2716")
);
// Attach contribution index to the tag
contributionTag.attr(
"data-contribution-index",
project.contributions.length - 1
);
$(this).closest("tr").find(".contributions").append(contributionTag);
$(this)
.closest("tr")
.find(".fundedAmount")
.text("(Ğ1) " + project.fundedAmount.toFixed(2));
$(this).val("");
}
}
});
$("#projectTable").on("click", ".removeContribution", function (e) {
let contributionTag = $(this).parent();
let contributionIndex = contributionTag.data("contributionIndex");
let projectName = contributionTag.closest("tr").data("projectName");
let project = quadraticFunding.projects.find(function (project) {
return project.name === projectName;
});
if (project & & contributionIndex !== undefined) {
let contribution = project.contributions[contributionIndex];
// Use splice to remove the contribution
project.contributions.splice(contributionIndex, 1);
project.fundedAmount -= contribution;
calculateMatchAmounts();
$(this)
.closest("tr")
.find(".fundedAmount")
.text("(Ğ1) " + project.fundedAmount.toFixed(2));
$(this)
.closest("tr")
.find(".contributionTag")
.each(function (index) {
$(this).attr("data-contribution-index", index);
});
contributionTag.remove();
}
});
function calculateMatchAmounts() {
const totalDonations = quadraticFunding.projects.reduce(
(total, project) => total + project.fundedAmount,
0
);
// If no donations are made yet, set matchAmount to 100
const matchAmountPerRound = totalDonations > 0 ? totalDonations : 100;
const squares = quadraticFunding.projects.map((project) => {
const sqrtSum = project.contributions.reduce(
(sum, contrib) => sum + Math.sqrt(contrib),
0
);
return sqrtSum * sqrtSum;
});
const totalSquares = squares.reduce((sum, sq) => sum + sq, 0);
const matches = squares.map(
(sq) => (sq / totalSquares) * matchAmountPerRound
);
for (let i = 0; i < quadraticFunding.projects.length ; i + + ) {
const matchAmount = matches[i];
quadraticFunding.projects[i].matchAmount = matchAmount;
$("#projectTable")
.find(
`tr[data-project-name='${quadraticFunding.projects[i].name}'] .matchAmount`
)
.text("(Ğ1) " + matchAmount.toFixed(2));
}
$("#matchAmount").val(totalDonations);
updateUrl(); // Update URL after recalculating match amounts
}
// Load parameters from URL if exist
function loadDefaults() {
const params = new URLSearchParams(window.location.search);
if (params.has("match")) {
quadraticFunding.matchAmount = parseFloat(params.get("match"));
}
let projectsToLoad = [];
if (params.has("grant")) {
let grants = params.getAll("grant");
if (grants.length > 0) {
for (let i = 0; i < grants.length ; i + + ) {
let contributions = grants[i]
.split("-")
.map(parseFloat)
.filter((num) => !isNaN(num));
projectsToLoad.push({
name: "Project #" + (i + 1),
contributions: contributions,
fundedAmount: contributions.reduce((a, b) => a + b, 0),
matchAmount: 0,
});
}
}
}
for (let project of projectsToLoad) {
$("#addProject").click();
let projectRow = $("#projectTable").find(
`tr[data-project-name='${project.name}']`
);
for (let contribution of project.contributions) {
projectRow.find(".contributionInput").val(contribution);
projectRow.find(".contributionInput").trigger(
jQuery.Event("keypress", {
which: 13,
})
);
}
}
// test if we have no grant in the url, add 4
if (!params.has("grant") & & !params.has("match")) {
for (let i = 1; i < = 4; i++) {
$("#addProject").click();
}
}
}
// Call this function on page load to load the values from the URL
loadDefaults();
});
< / script > < / div > < / div > < / div >
2023-08-21 17:31:05 +02:00
< / html >
