| | <!DOCTYPE html>
|
| | <html lang="en">
|
| |
|
| | <head>
|
| | <meta charset="UTF-8" />
|
| | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| | <title>Drag and Drop Survey Builder</title>
|
| | <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
|
| | <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
|
| | <link rel="stylesheet" href="dragDrop.css" />
|
| | </head>
|
| |
|
| | <body class="d-flex flex-column min-vh-100">
|
| |
|
| | <nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm">
|
| | <div class="container-fluid">
|
| | <a class="navbar-brand d-flex align-items-center" href="index.html">
|
| | <img src="./images/logo.png" alt="Survey Builder Logo" height="40" class="me-2">
|
| | <span class="text-white">Survey Builder</span>
|
| | </a>
|
| | <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
| | aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
| | <span class="navbar-toggler-icon"></span>
|
| | </button>
|
| | <div class="collapse navbar-collapse" id="navbarNav">
|
| | <ul class="navbar-nav ms-auto">
|
| | <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
|
| | <li class="nav-item"><a class="nav-link" href="dragAndDrop.html">Survey Builder</a></li>
|
| | <li class="nav-item"><a class="nav-link active" href="instructions.html">Setup & Instructions</a></li>
|
| |
|
| | </ul>
|
| | </div>
|
| | </div>
|
| | </nav>
|
| |
|
| | <div class="container my-5">
|
| |
|
| | <div class="card shadow-sm mb-4">
|
| | <div class="card-header bg-primary text-white">
|
| | <h3 class="mb-0">Welcome to the Instructions Page</h3>
|
| | </div>
|
| | <div class="card-body">
|
| | <p class="lead mb-2">This page contains setup instructions for all required integrations.</p>
|
| | <p class="mb-0">Click on each section below to expand it and follow the steps carefully. We recommend going from top to bottom if this is your first time setting things up.</p>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| |
|
| | <div class="card shadow-sm mb-4">
|
| | <div class="card-header bg-primary text-white">
|
| | <h3 class="mb-0">
|
| | <button class="btn btn-link text-white text-decoration-none w-100 d-flex justify-content-between align-items-center collapsed"
|
| | data-bs-toggle="collapse" data-bs-target="#uploadIntruc" aria-expanded="false">
|
| | Uploading survey file directly to Github or Huggingface
|
| | <i class="bi bi-chevron-down rotate-icon"></i>
|
| | </button>
|
| | </h3>
|
| | </div>
|
| | <div id="uploadIntruc" class="collapse">
|
| | <div class="card-body">
|
| | <p class="lead">Instructions on upload your survey file directly to Github or Huggingface from our web app.</p>
|
| | <ol class="list-group list-group-numbered">
|
| | <li class="list-group-item">Generate a <b>Access Token</b> on either your <b>Github</b> or <b>Huggingface</b> account. (Intructions can be found below on how to do that)</li>
|
| | <li class="list-group-item">Create a <b>repository</b> on Github or a <b>space</b> on Huggingface to upload the survey file to. (When creating a space on Huggingface, for <b>Space SDK </b>you want to choose <b>Docker</b> > <b>Streamlit</b>)</li>
|
| | <li class="list-group-item">Once you have completed both of these tasks, go to the <b>Survey Builder</b> page on our app.</li>
|
| | <li class="list-group-item">Click <b>Export Survey</b>, then <b>upload to Huggingface</b> or <b>Github</b>.</li>
|
| | <li class="list-group-item">Enter your <b>repository</b> or <b>space</b> name in the format username/repository-name and <b>Access Token</b> you generated at the beginning.</li>
|
| | <li class="list-group-item">Click <b>Submit</b>! This should give you a message on whether it successfully or unsuccessfully uploaded your survey file.</li>
|
| | </ol>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div class="card shadow-sm mb-4">
|
| | <div class="card-header bg-primary text-white">
|
| | <h3 class="mb-0">
|
| | <button class="btn btn-link text-white text-decoration-none w-100 d-flex justify-content-between align-items-center collapsed"
|
| | data-bs-toggle="collapse" data-bs-target="#hfTokenSetup" aria-expanded="false">
|
| | Huggingface Token Setup
|
| | <i class="bi bi-chevron-down rotate-icon"></i>
|
| | </button>
|
| | </h3>
|
| | </div>
|
| | <div id="hfTokenSetup" class="collapse">
|
| | <div class="card-body">
|
| | <p class="lead">Instructions on how to generate an Access Token for Huggingface.</p>
|
| | <ol class="list-group list-group-numbered">
|
| | <li class="list-group-item">Sign in at <a href="https://huggingface.co/" target="_blank">huggingface.co</a>.</li>
|
| | <li class="list-group-item">Click profile > <b>Settings</b>.</li>
|
| | <li class="list-group-item">Click <b>Access Tokens</b>.</li>
|
| | <li class="list-group-item">Click <b>Create new token</b> with type <b>Fine-grained</b>.</li>
|
| | <li class="list-group-item">Give it a name, check repo write access, then <b>Create token</b>.</li>
|
| | <li class="list-group-item"><b>Important:</b> Copy and save it immediately.</li>
|
| | </ol>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div class="card shadow-sm mb-4">
|
| | <div class="card-header bg-primary text-white">
|
| | <h3 class="mb-0">
|
| | <button class="btn btn-link text-white text-decoration-none w-100 d-flex justify-content-between align-items-center collapsed"
|
| | data-bs-toggle="collapse" data-bs-target="#githubSetup" aria-expanded="false">
|
| | GitHub Token Setup
|
| | <i class="bi bi-chevron-down rotate-icon"></i>
|
| | </button>
|
| | </h3>
|
| | </div>
|
| | <div id="githubSetup" class="collapse">
|
| | <div class="card-body">
|
| | <p class="lead">Instructions on how to generate an Access Token for GitHub.</p>
|
| | <p class="text-muted">This Access Token is used to directly upload the survey to your GitHub repository.</p>
|
| | <ol class="list-group list-group-numbered">
|
| | <li class="list-group-item">Go to <a href="https://github.com/" target="_blank">github.com</a> and sign in or create an account.</li>
|
| | <li class="list-group-item">Click your profile picture > <b>Settings</b>.</li>
|
| | <li class="list-group-item">Scroll down > <b>Developer settings</b>.</li>
|
| | <li class="list-group-item">Expand <b>Personal access tokens</b> > <b>Tokens (classic)</b>.</li>
|
| | <li class="list-group-item">Click <b>Generate new token (classic)</b>.</li>
|
| | <li class="list-group-item">Enter a name, select <b>repo</b>, and click <b>Generate token</b>.</li>
|
| | <li class="list-group-item"><b>Important:</b> Save the token—you won’t be able to view it again.</li>
|
| | </ol>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| |
|
| | <div class="card shadow-sm mb-4">
|
| | <div class="card-header bg-primary text-white">
|
| | <h3 class="mb-0">
|
| | <button class="btn btn-link text-white text-decoration-none w-100 d-flex justify-content-between align-items-center collapsed"
|
| | data-bs-toggle="collapse" data-bs-target="#streamlitHosting" aria-expanded="false">
|
| | Hosting Survey using a Github repository through Streamlit
|
| | <i class="bi bi-chevron-down rotate-icon"></i>
|
| | </button>
|
| | </h3>
|
| | </div>
|
| | <div id="streamlitHosting" class="collapse">
|
| | <div class="card-body">
|
| | <p class="lead">Instructions on how to host your survey using a Github repo through Streamlit.</p>
|
| | <ol class="list-group list-group-numbered">
|
| | <li class="list-group-item">Once you have uploaded the survey file to GitHub, then go to <a href="https://share.streamlit.io/" target="_blank">Streamlit Sharing</a>.</li>
|
| | <li class="list-group-item">Sign in with GitHub and click <b>Create app</b>.</li>
|
| | <li class="list-group-item">Set <b>survey_script.py</b> as the main file path.</li>
|
| | <li class="list-group-item">Click <b>Deploy</b> to launch the app! (This should give you a link to where people can now take your survey)</li>
|
| | </ol>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div class="card shadow-sm mb-4">
|
| | <div class="card-header bg-primary text-white">
|
| | <h3 class="mb-0">
|
| | <button class="btn btn-link text-white text-decoration-none w-100 d-flex justify-content-between align-items-center collapsed"
|
| | data-bs-toggle="collapse" data-bs-target="#pinataSetup" aria-expanded="false">
|
| | Piñata API Setup
|
| | <i class="bi bi-chevron-down rotate-icon"></i>
|
| | </button>
|
| | </h3>
|
| | </div>
|
| | <div id="pinataSetup" class="collapse">
|
| | <div class="card-body">
|
| | <ol class="list-group list-group-numbered">
|
| | <li class="list-group-item">Create a Piñata account at <a href="https://www.pinata.cloud" target="_blank" class="text-primary">pinata.cloud</a>.</li>
|
| | <li class="list-group-item">Generate an API key in the <em>API Keys</em> section.</li>
|
| | <li class="list-group-item">Create a JWT in the <em>JWT Keys</em> tab.</li>
|
| | <li class="list-group-item">Add the JWT token to Streamlit as <code>PinataJWT</code> in your secrets.</li>
|
| | </ol>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div class="card shadow-sm mb-4">
|
| | <div class="card-header bg-primary text-white">
|
| | <h3 class="mb-0">
|
| | <button class="btn btn-link text-white text-decoration-none w-100 d-flex justify-content-between align-items-center collapsed"
|
| | data-bs-toggle="collapse" data-bs-target="#infuraSetup" aria-expanded="false">
|
| | Infura URL/API Setup
|
| | <i class="bi bi-chevron-down rotate-icon"></i>
|
| | </button>
|
| | </h3>
|
| | </div>
|
| | <div id="infuraSetup" class="collapse">
|
| | <div class="card-body">
|
| | <p class="lead">Follow these steps to set up Infura and connect to Sepolia.</p>
|
| | <ol class="list-group list-group-numbered">
|
| | <li class="list-group-item">Go to <a href="https://infura.io" target="_blank">infura.io</a> and sign up.</li>
|
| | <li class="list-group-item">On the left-hand side, select <b>Infura RPC</b>.</li>
|
| | <li class="list-group-item">Click on <b>Active Endpoints</b> and select <b>Ethereum Sepolia</b>.</li>
|
| | <li class="list-group-item">Copy the HTTPS URL and save it so you do not have to return here.</li>
|
| | </ol>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div class="card shadow-sm mb-4">
|
| | <div class="card-header bg-primary text-white">
|
| | <h3 class="mb-0">
|
| | <button class="btn btn-link text-white text-decoration-none w-100 d-flex justify-content-between align-items-center collapsed"
|
| | data-bs-toggle="collapse" data-bs-target="#walletSetup" aria-expanded="false">
|
| | Setting up your Wallet
|
| | <i class="bi bi-chevron-down rotate-icon"></i>
|
| | </button>
|
| | </h3>
|
| | </div>
|
| | <div id="walletSetup" class="collapse">
|
| | <div class="card-body">
|
| | <p class="lead">Use Coinbase Wallet for Sepolia testnet setup.</p>
|
| | <ol class="list-group list-group-numbered">
|
| | <li class="list-group-item">Download the <a href="https://www.coinbase.com/wallet" target="_blank">Coinbase Wallet</a> app.</li>
|
| | <li class="list-group-item">Tap <strong>“Create New Wallet”</strong> and back up your phrase.</li>
|
| | <li class="list-group-item">Ensure you're on the <strong>Sepolia Test Network</strong>.</li>
|
| | <li class="list-group-item">Copy your wallet address for faucets.</li>
|
| | </ol>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div class="card shadow-sm mb-4">
|
| | <div class="card-header bg-primary text-white">
|
| | <h3 class="mb-0">
|
| | <button class="btn btn-link text-white text-decoration-none w-100 d-flex justify-content-between align-items-center collapsed"
|
| | data-bs-toggle="collapse" data-bs-target="#sepoliaETH" aria-expanded="false">
|
| | Receive Sepolia Testnet ETH
|
| | <i class="bi bi-chevron-down rotate-icon"></i>
|
| | </button>
|
| | </h3>
|
| | </div>
|
| | <div id="sepoliaETH" class="collapse">
|
| | <div class="card-body">
|
| | <p class="lead">Steps to get testnet ETH:</p>
|
| | <ul class="list-group list-group-flush">
|
| | <li class="list-group-item">Go to <a href="https://cloud.google.com/application/web3/faucet/ethereum/sepolia" target="_blank">Google Sepolia Faucet</a>.</li>
|
| | <li class="list-group-item">Paste your wallet address and request ETH.</li>
|
| | </ul>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div class="card shadow-sm mb-4">
|
| | <div class="card-header bg-primary text-white">
|
| | <h3 class="mb-0">
|
| | <button class="btn btn-link text-white text-decoration-none w-100 d-flex justify-content-between align-items-center collapsed"
|
| | data-bs-toggle="collapse" data-bs-target="#smartContract" aria-expanded="false">
|
| | Deploying Smart Contract
|
| | <i class="bi bi-chevron-down rotate-icon"></i>
|
| | </button>
|
| | </h3>
|
| | </div>
|
| | <div id="smartContract" class="collapse">
|
| | <div class="card-body">
|
| | <p class="lead">These are instructions on how to deploy a smart contract.</p>
|
| | <ol class="list-group list-group-numbered">
|
| | <li class="list-group-item">Go to <a href="https://huggingface.co/spaces/DragAndDropSurveyBuilder/SmartContractDeploy" target="_blank">Deploy Smart Contract</a></li>
|
| | <li class="list-group-item">Enter your wallet address, private key, and infura URL.</li>
|
| | <li class="list-group-item">Press <b>Deploy Contract</b></li>
|
| | <li class="list-group-item">Copy the text after it says "Contract deployed successfully at:"</li>
|
| | <li class="list-group-item">Save this text somewhere since your will need to deploy a new contract if you lose it.</li>
|
| | </ol>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div class="card shadow-sm mb-4">
|
| | <div class="card-header bg-primary text-white">
|
| | <h3 class="mb-0">
|
| | <button class="btn btn-link text-white text-decoration-none w-100 d-flex justify-content-between align-items-center collapsed"
|
| | data-bs-toggle="collapse" data-bs-target="#secrets" aria-expanded="false">
|
| | Adding Secrets to Huggingface Space
|
| | <i class="bi bi-chevron-down rotate-icon"></i>
|
| | </button>
|
| | </h3>
|
| | </div>
|
| | <div id="secrets" class="collapse">
|
| | <div class="card-body">
|
| | <p class="lead">These are instructions on add secrets to a Huggingface space to enable submitting results to blockchain.</p>
|
| | <ol class="list-group list-group-numbered">
|
| | <li class="list-group-item">Go to your Huggingface space and click on <b>Settings</b> in the top right-hand corner.</li>
|
| | <li class="list-group-item">Scroll down to <b>Variables and secrets</b>.</li>
|
| | <li class="list-group-item">Press <b>New Secret</b>.</li>
|
| | <li class="list-group-item">You will need to add 5 secrets with the following names: <b>PinataJWT</b> (The PinataJWT Token), infura (infura API URL), <b>ContractAddress</b> (Smart Contract Address), <b>EthWallet</b> (Etherium Wallet Address), and <b>pk</b> (Etherium Wallet Private Key)</li>
|
| | </ol>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | <div class="card shadow-sm mb-4">
|
| | <div class="card-header bg-primary text-white">
|
| | <h3 class="mb-0">
|
| | <button class="btn btn-link text-white text-decoration-none w-100 d-flex justify-content-between align-items-center collapsed"
|
| | data-bs-toggle="collapse" data-bs-target="#Surveyresults" aria-expanded="false">
|
| | Retrieve Survey Results
|
| | <i class="bi bi-chevron-down rotate-icon"></i>
|
| | </button>
|
| | </h3>
|
| | </div>
|
| | <div id="Surveyresults" class="collapse">
|
| | <div class="card-body">
|
| | <p class="lead">These are instructions on how to Retrieve Survey Results.</p>
|
| | <ol class="list-group list-group-numbered">
|
| | <li class="list-group-item">Go to <a href="https://huggingface.co/spaces/DragAndDropSurveyBuilder/SurveyResultRetriever" target="_blank">Retrieve Survey Results</a></li>
|
| | <li class="list-group-item">Enter your smart contract address.</li>
|
| | <li class="list-group-item">Press <b>Get Results</b></li>
|
| |
|
| | </ol>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| |
|
| | </div>
|
| |
|
| | <script>
|
| | document.getElementById('download-README-btn').addEventListener('click', async () => {
|
| | try {
|
| | const response = await fetch('./images/README.md');
|
| | if (!response.ok) {
|
| | throw new Error('File not found or not accessible.');
|
| | }
|
| | const blob = await response.blob();
|
| | const a = document.createElement("a");
|
| | a.href = URL.createObjectURL(blob);
|
| | a.download = "README.md";
|
| | document.body.appendChild(a);
|
| | a.click();
|
| | document.body.removeChild(a);
|
| | } catch (err) {
|
| | console.error('Download failed:', err);
|
| | alert("Failed to download README.md");
|
| | }
|
| | });
|
| | </script>
|
| |
|
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
|
| | </body>
|
| |
|
| | </html> |
