Question

Implement a feature in html/css that takes a sample text and fits it into a shape....

Implement a feature in html/css that takes a sample text and fits it into a shape. there are simple shapes built in, or you can do custom shapes with a polygon tool. You can choose what shape to make.

Engineering   Computer-Science   
0 0
Add a commentTranscribed image text
Next >

Homework Answers

Answer #1

Code:

<!DOCTYPE html>
<html>
<head>
<style>
.shape {
  height: 150px;    
  width: 150px;
  background-color: #0074d9;
  border-radius: 80px;
  text-align:center;
  margin: auto;
  font-family:arial
}
h2{
        margin-top:55px;
}
.shape2 {
        border-radius: 30px;
}
.shape3 {
        border-radius: 5px;
}

body, html {
  height: 100%;
}
#canvas{
width:200px;
height:100px;
border-radius: 5px;
background-color: #0074d9; 
margin:10px;
}
body {
  background-color: #001f3f;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
</head>
<body>

<canvas id="canvas"></canvas>   <!-- draw rectange shape using canvas-->
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial ";
ctx.fillText("Sample",100,80);
</script>

<!--  draw custom shapes using css -->
<div class="shape"><h2>Sample</h2></div>  
<div class="shape shape2"><h2>Sample</h2></div>   
<div class="shape shape3"><h2>Sample</h2></div>

</body>
</html>

Output:

WordCloud of student result

<!DOCTYPE html>
<html>
 <head>
  <title>Word Cloud</title>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-tag-cloud.min.js"></script>
  <style>
    html, body, #mycloud {
    width: 100%;
    height: 100%;
    background-color: #0074d9;
    }
  </style> 
 </head>
  <body>
   <div id="mycloud"></div>
    <script>
        anychart.onDocumentReady(function() {
        var data = [
          {"x": "Student7", "value": 89, category: "Maths"},
          {"x": "Student1", "value": 20, category: "Physics"},
          {"x": "Student12", "value": 69, category: "Biology"},
          {"x": "Student3", "value": 30, category: "Biology"},
          {"x": "Student4", "value": 56, category: "Chemistry"},
          {"x": "Student5", "value": 80, category: "Chemistry"},
          {"x": "Student6", "value": 56, category: "Physics"},
          {"x": "Student8", "value": 34, category: "Maths"},
          {"x": "Student9", "value": 67, category: "Maths"},
          {"x": "Student10", "value": 80, category: "Maths"},
          {"x": "Student11", "value": 45, category: "Physics"},
          {"x": "Student2", "value": 87, category: "Biology"},
          {"x": "Student13", "value": 100, category: "Chemistry"},
          {"x": "Student14", "value": 34, category: "Chemistry"}
        ];
        // create cloud chart of given JSON data
        var chart = anychart.tagCloud(data);
        // set a chart title
        chart.title('Student Result')
        // set an array of angles at which the words will be laid out
        chart.angles([0, -45, 90])
        // enable a color range
        chart.colorRange(true);
        // set the color range length
        chart.colorRange().length('80%');
        // display word cloud chart
        chart.container("mycloud");
        chart.draw();
      });
    </script>
  </body>
</html>

Output:

0 0
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
(javascript/css/html) Follow these steps to implement the following browser-based puzzle game: 1. Get a photo of...
(javascript/css/html) Follow these steps to implement the following browser-based puzzle game: 1. Get a photo of yourself and save it as an image file 2. Use a image-splitting program such as splitter.imageonline.co to break the image into 9 roughly equal parts (3 x 3). Save those files in a directory 3. Write Javascript that takes these nine images and randomly rearranges them in a 3 x 3 grid. 4. Each cell in the grid will also have a checkbox. 5....
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
TASK 2: Open numberic-variable_problem.js file in a text editor (e.g., NotePad++). What is the syntax error...
TASK 2: Open numberic-variable_problem.js file in a text editor (e.g., NotePad++). What is the syntax error in the JavaScript file? Find error message in console in a browser’s developer tool. Fix that error and reload the web page in browser. What is the change in the content displayed in the web page after fix the syntax error in the JavaScript code? Replace the line#18 statement (el.textContent = '$' + total;) in the JavaScript code with    el.textContent = '$' + total.toFixed(3);...
This will be my third time submitting this question. THERE SHOULD BE NO USE OF CSS...
This will be my third time submitting this question. THERE SHOULD BE NO USE OF CSS OR SWITCH STATEMENTS IN THE JAVASCRIPT. Even though there is stylesheet in the HTML file do no create a new one. Project Standards: Students will use click events to capture user input. Students will use variables to store information needed by their application and keep track of their program’s state. Students will use conditionals to control project flow. Project Task You will be building...
A pharmaceutical company is testing a new drug to increase memorization ability. It takes a sample...
A pharmaceutical company is testing a new drug to increase memorization ability. It takes a sample of individuals and splits them randomly into two groups. One group is administered the drug, and the other is given a placebo. After the drug regimen is completed, all members of the study are given a test for memorization ability with higher scores representing a better ability to memorize. You are presented a 90% confidence interval for the difference in population mean scores (with...
C++. Write a program that draws a rocket shape on the screen based on user input...
C++. Write a program that draws a rocket shape on the screen based on user input of three values, height, width and stages. The type of box generated (i.e.. a hollow or filled-in) is based on a check for odd or even values input by the user for the box height (or number of rows). Here is the general specification given user input for the height of the box..... Draw a hollow box for each stage if the value for...
In the previous assessment, you used a static set of named variables to store the data...
In the previous assessment, you used a static set of named variables to store the data that was entered in a form to be output in a message. For this assessment, you will use the invitation.html file that you modified in the previous assessment to create a more effective process for entering information and creating invitations for volunteers. Rather than having to enter each volunteer and create an invitation one at a time, you will create a script that will...
Question 1 of 15 Which of the following is not a recommended starting point to enter...
Question 1 of 15 Which of the following is not a recommended starting point to enter sales of products/services? A. Quick Create > Invoice B. Register > New transaction C. Quick Create > Sales Receipt D. Customer detail page > New transaction E. Transactions > Sales > New transaction Question 2 of 15 Which of the following statements accurately describes bank rules? A. Bank rules are imported from the Bank's website into the For Review tab in the Banking Center...
I did already posted this question before, I did get the answer but i am not...
I did already posted this question before, I did get the answer but i am not satisfied with the answer i did the code as a solution not the description as my solution, so i am reposting this question again. Please send me the code as my solution not the description In this project, build a simple Unix shell. The shell is the heart of the command-line interface, and thus is central to the Unix/C programming environment. Mastering use of...
1. Vim commands: a. How do you auto indent your program? b. Explain what the following...
1. Vim commands: a. How do you auto indent your program? b. Explain what the following commands do: dd, y3, p, :set cindent (1 pt) VIM exercises These exercises on the computer need to be repeated by each student in the pair. This is to ensure that both students understand how to get around in Linux!!! For this part of the lab, you will create a .vimrc file that will help you develop your C++ programs using VIM. First, we...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT