Creating a Circular Design with a Centered Line and Text Above and Below using Qualtrics (HTML/CSS/Java)

My knowledge of creating shapes and using these programming languages is limited.

I am currently working on a survey in Qualtrics and I need to insert text into circular shapes.

  1. Creating one circle was straightforward, thanks to some helpful discussions I found. For visual reference, see the image provided below.

Currently, I have implemented the following code for the simple circle, but I will need to modify it to accommodate the second circle as well.

.circle
    {
    width:500px;
    height:500px;
    border-radius:250px;
    font-size:50px;
    color:#fff;
    line-height:500px;
    text-align:center;
    background:#000
    }
<div class="circle">Text</div>

  1. The second circle requires a dividing line in the middle to separate two different text inputs - one above the line and another below it.

Simple Circle

Circle with two text inputs

javahtmlcssqualtrics

Answer №1

I utilized the linear-gradient property for the "background" (the middle line) and employed flex for text alignment.

.circle
    {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 200px;
    height: 200px;
    border-radius: 250px;
    font-size: 30px;
    color: black;
    text-align: center;
    background: #000;
    border: solid black 1px;
    background: linear-gradient(to top, white 49%, black 50%, white 50%),
      linear-gradient(to bottom, white, black 60%, white 50%);
}
<div class="circle">
  <div>Text</div>
  <div>Text</div>

</div>

As mentioned by imperyum, you can create the line using before/after pseudo elements

 .circle
    {
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    width:200px;
    height:200px;
    border-radius:50%;
    font-size:30px;
    color:black;
    text-align:center;
    background:#000;
    border:solid black 1px;
    background: white
}

.circle:after {
  content:"";
  width:100%;
  background-color:black;
 height:1px;
  position:absolute;
  top:50%;
}
<div class="circle">
  <div>Text</div>
  <div>Text</div>

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reverse the order of items in a LinkedHashMap

I am looking to reverse the elements in my LinkedHashMap. Here is an example: public static void main(String[] args){ Map<String, Integer> map = new LinkedHashMap<>(); map.put("Hello", 2); map.put("World", 1); reverse(map); ...

javadictionarycollections

Adding data to the SharePoint RichText Control using the WinForms WebBrowser Control

I am struggling to modify the content of an SP Rich Text field using the WinForms web browser control. While changing the values of other controls is straightforward, I have encountered difficulties with Rich Text fields. I found some suggestions on this b ...

javascripthtmlsharepointbrowsercontrols

How can I use the Jackson library to compare the structure of two JSON objects while ignoring their values?

I am currently utilizing the library org.codehaus.jackson. Within my code, I have two JSON objects. The first object is obtained from reading a file named hello.json, while the second object is generated automatically. Here is the structure of the first ob ...

javajsonjackson

Adjust the viewing area dimensions on a web browser

Recently, while testing a web application page I developed with Selenium, I came across an interesting issue. After using the JavaScriptExecutor in Selenium to get the viewport size, I found that it was different for Chrome, IE, and Firefox. The sizes wer ...

javascripthtmlseleniumselenium-webdriver

Persistence-driven caching system

I am in search of a reliable cache system that can store millions of 6-character base36 strings and exhibit the following characteristics: - Strings retrieved from the cache by clients should be returned in ascending order based on their base36 value, fo ...

javacachingcollectionsmapdb

Building an Array in PHP

When a user submits a form with multiple text inputs that share the same name attribute, how can I handle this in my PHP code? Example HTML: <input type="text" name="interest"/> ...

phphtml

Picture shifting when adjusting window size

I have been attempting multiple times to prevent an image on my website from moving when resizing the window, but I have not been successful. All I want is for this image to remain in the exact same position, no matter the size of the window. The image " ...

htmlcssresizepositioning

Using Django to render multiple images for a post

For the past few days, I have been attempting to provide the admin user with the ability to upload multiple images/slides for each individual post. One idea that came to mind was nesting a for loop inside the posts' for loop so that for every post, al ...

htmldjangodjango-modelsrendering

Is it necessary to upload a file in order to view a webpage? Could it be that my coding skills

Here's a simple concept: when you navigate to the same webpage, a different file should be uploaded based on whether you click on <a> elements labeled as tracks or sets. However, my code seems to be malfunctioning. Any ideas? Below is the HTML ...

jqueryhtmlajax

Difficulty establishing a connection between data in app.js and index.html using Ionic framework

Struggling with connecting index.html to get data for my Ionic mobile app. Any tips or guidance would be highly appreciated as I'm new to this! The goal is to display a list of restaurants in the app, utilizing Cards Images to showcase an image, logo ...

androidhtmlangularjsionic-framework

Discovering the point of exit for a mouse from an image

Visit this website to see the effect in action: I am curious about how the image scrolls into and out of the direction where the mouse enters and leaves. Can you explain how this is achieved? ...

javascriptjquerycsshtml

Generate a hyperlink within a paragraph

Can anyone provide tips on how to turn a string from Json into a paragraph with a hyperlink included? <p>Dumy Dumy Dumy Dumy Dumy Dumy Dumy DumyDumyDumyDumy abc.com </p> Currently, the paragraph displays as is, but I would like to make abc.c ...

javascripthtmlangularjs

Guide on modifying Firefox profile preference properties such as "security.insecure_field_warning.contextual.enabled" using Java

Firefox Version 53.0 (32-bit) Selenium 3.4.0 ProfilesIni profile = new ProfilesIni(); FirefoxProfile firefoxProfile = profile.getProfile("Selenium"); firefoxProfile.setPreference("security.insecure_field_warning.contextual.enabled", false); ...

javaseleniumfirefoxwebdrivergeckodriver

What is the best combination of tools to use for web development: express with jade/ejs, along with html5, css

As I delve into learning node.js/express, a question arises about how jade/ejs, html, and css work in harmony. Allow me to share my understanding: The application logic is implemented in node.js/express A portion of this logic/variables is injected into ...

htmlcssnode.jsexpresspug

Issues with Toggling Visibility in HTML, CSS, and Javascript

Currently, I am working on a website and following a tutorial called "Creating Slideshow using HTML, CSS, and Javascript" by W3Schools. In the project, I want to hide the thumbnail images located at the bottom and the navigation arrows initially and have t ...

javascripthtmlcssvisible

Guide to building a personalized 12-column CSS grid system with Flexbox technology

Seeking assistance in developing a Responsive 12 column grid system using CSS FLEXBOX to ensure my website is responsive. I am determined to create my own grid system without relying on any CSS framework, utilizing custom class names. Any tips or guidance ...

cssflexboxresponsivegrid-systemflexboxgrid

"Angular 6: A Guide to Customizing Text Colors Based on Status

I have a view on angular just like this: https://i.sstatic.net/JimWN.png And this is my dashboard.component.ts: export class DashboardComponent implements OnInit { tablePresetColumns; tablePresetData; ngOnInit() { this.tablePresetColumns = [{id: ...

htmlcssangularlessangular6

Validating Date Input in HTML and JavaScript Text Fields

When designing my form, I wanted to ensure that users could only input digits and hyphens in a text field where they enter a date. However, I encountered some difficulty implementing this feature. Currently, the field only accepts digits and removes any le ...

javascripthtml

Tips for adding an animated box shadow in CSS without adjusting the shadow's direction

A unique box with a rotating animation was created, however, applying a box-shadow caused the shadow to also rotate along with the box. <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> body{ displa ...

csscss-animations

How to sanitize data by removing HTML tags in a MySQL query before inserting or selecting from a database table

My dilemma involves data that is wrapped in HTML tags. I need to transfer this data into a database table as simple text, without the accompanying HTML formatting. Is there MySQL code available that could assist in stripping out the HTML tags during eithe ...

javamysqlhtmlsqljsp