Scribd
Upload
3 views

FSWD-8

Uploaded by

mirudhuvarshini534
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

FSWD-8

Uploaded by

mirudhuvarshini534
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Ex.No.

8 Develop an online survey application where a collection of


questions is available and users are asked to answer any
DATE: random 5 questions.

AIM:

Develop an online survey application where a collection of questions is available and


users are asked to answer any random 5 questions.

ALGORITHM:

Step 1: Identify essential sections.

Step 2: Choose a Technology Stack Select a web development framework and languages.

Step 3: Create Project Structure Establish directories for HTML, CSS, JavaScript files, and assets.

Step 4: Code HTML Structure Develop HTML templates for each webpage (index, about, resume,
projects, contact).

Step 5: Implement CSS Styling Style HTML elements using CSS for a visually appealing design.

Step 6: Add JavaScript Functionality Integrate JavaScript for interactive features and dynamic
content loading.

Step 7: Test and Debug Conduct thorough testing on different browsers and devices.

PROGRAM:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Survey</title>
<link rel="stylesheet" href="styles.css">

Click here to enter text.


</head>
<style>
</style>
<body>
<div class="container">
<h1>TECH SURVEY</h1>
<b>
<p>Choose exactly 5 questions to answer:</p>
</b>
<div id="questionContainer">
<!-- Questions will be dynamically generated here -->
</div>
<button onclick="proceedToSurvey()">NEXT</button>
</div>
<script>
</script>
</body>
</html>

CSS:

body {
font-family: Book 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial,
sans-serif;
background-image: url('img4.jpg');
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 500px;
text-align: center;
}
h1 {
margin-bottom: 20px;
color: #333;

Click here to enter text.


}
#questionContainer {
text-align: left;
margin-bottom: 30px;
}
.question, .survey-question {
margin-bottom: 15px;
}
.options {
margin-top: 5px;
margin-bottom: 5px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="checkbox"] {
margin-right: 10px;
}
input[type="radio"] {
margin-right: 5px;
}

JAVASCRIPT:

const questions = [
"How often do you use technology in your daily routine?",
"What device do you primarily use for accessing the internet?",
"How comfortable are you with using new technology?",
"Which of the following technologies are you most interested in learning?",
"What is your preferred operating system?",
"How often do you update your software or devices?",
"What concerns you most about technology?",
"How do you primarily use technology for educational purposes?",
"Which tech-related social media platforms do you use the most?",
"How do you feel about the integration of AI into daily life?"
];

Click here to enter text.


const options = {
0: ["Several times a day", "Once a day", "A few times a week", "Rarely"],
1: ["Smartphone", "Laptop", "Desktop", "Tablet"],
2: ["Very comfortable", "Somewhat comfortable", "Neutral", "Uncomfortable"],
3: ["AI", "Blockchain", "Cybersecurity", "Cloud Computing"],
4: ["Windows", "macOS", "Linux", "Android"],
5: ["Immediately", "Within a week", "Occasionally", "Rarely"],
6: ["Privacy", "Data Security", "Mental Health", "Job Displacement"],
7: ["Online courses", "Research", "Educational videos", "Skill practice"],
8: ["LinkedIn", "GitHub", "Twitter", "Reddit"],
9: ["Very positive", "Somewhat positive", "Neutral", "Somewhat negative"]
};

const questionContainer = document.getElementById("questionContainer");

questions.forEach((question, index) => {


const questionDiv = document.createElement("div");
questionDiv.className = "question";

const checkbox = document.createElement("input");


checkbox.type = "checkbox";
checkbox.value = index;
checkbox.id = question${index};
checkbox.name = "question";

const label = document.createElement("label");


label.htmlFor = question${index};
label.textContent = question;

questionDiv.appendChild(checkbox);
questionDiv.appendChild(label);
questionContainer.appendChild(questionDiv);
});

function proceedToSurvey() {
const selectedQuestions = document.querySelectorAll('input[name="question"]:checked');
if (selectedQuestions.length !== 5) {
alert("Please select exactly 5 questions.");
return;
}

questionContainer.innerHTML = ""; // Clear existing content


selectedQuestions.forEach(question => {

Click here to enter text.


const index = question.value;
const questionDiv = document.createElement("div");
questionDiv.className = "survey-question";
questionDiv.innerHTML = <strong>${questions[index]}</strong>;

const optionsDiv = document.createElement("div");


optionsDiv.className = "options";

options[index].forEach(option => {
const optionLabel = document.createElement("label");
const radio = document.createElement("input");
radio.type = "radio";
radio.name = option${index};
radio.value = option;
optionLabel.appendChild(radio);
optionLabel.appendChild(document.createTextNode(option));
optionsDiv.appendChild(optionLabel);
optionsDiv.appendChild(document.createElement("br"));
});

questionDiv.appendChild(optionsDiv);
questionContainer.appendChild(questionDiv);
});

const submitBtn = document.createElement("button");


submitBtn.textContent = "SUBMIT";
submitBtn.onclick = submitSurvey;
questionContainer.appendChild(submitBtn);
}

function submitSurvey() {
const selectedAnswers = [];
const selectedQuestions = document.querySelectorAll('.survey-question');

selectedQuestions.forEach((question, index) => {


const selectedOption = question.querySelector(input[name="option${index}"]:checked);
if (selectedOption) {
selectedAnswers.push({
question: questions[index],
answer: selectedOption.value
});
}
});

Click here to enter text.


console.log("User's Answers:", selectedAnswers);
alert("Thank you for completing the survey!");
}

OUTPUT:

Click here to enter text.


Click here to enter text.
Department of IT
Performance 30
Observation 30
Record 40
Total 100

RESULT:

Click here to enter text.

You might also like